import { BetaSchemaForm } from '@ant-design/pro-components';
import { Card, Empty } from 'antd';
import React from 'react';

interface ConfigPanelProps {
	selectedModule: any;
	onConfigChange: (moduleId: string, config: any) => void;
}

const ConfigPanel: React.FC<ConfigPanelProps> = ({
	selectedModule,
	onConfigChange,
}) => {
	const handleValuesChange = (changedValues: any, allValues: any) => {
		if (selectedModule) {
			onConfigChange(selectedModule.id, {
				...selectedModule.config,
				...allValues,
			});
		}
	};

	if (!selectedModule) {
		return (
			<Card
				title="配置面板"
				size="small"
				className="bg-white rounded-lg p-4 h-full"
			>
				<Empty description="请选择要配置的模块" />
			</Card>
		);
	}

	return (
		<Card
			title="模块配置"
			size="small"
			className="bg-white rounded-lg p-4 h-full"
		>
			{selectedModule.config && selectedModule.schemas && (
				<BetaSchemaForm
					key={selectedModule.id}
					layoutType="Form"
					layout={'horizontal'}
					rowProps={{
						gutter: [16, 16],
					}}
					colProps={{
						span: 24,
					}}
					request={() => {
						return Promise.resolve(selectedModule.config);
					}}
					onValuesChange={handleValuesChange}
					columns={selectedModule.schemas}
					submitter={false}
				/>
			)}
		</Card>
	);
};

export default ConfigPanel;
