import { deepCopy, UserConfig } from 'dooringx-lib';
import { Col, Input, Row, Form, Button } from 'antd';
import { memo, useMemo } from 'react';
import React from 'react';
import { FormMap } from '../formTypes';
import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
import { BetaSchemaForm, ProFormColorPicker } from '@ant-design/pro-components';

interface MInputProps {
	data: CreateOptionsRes<FormMap, 'colorSelect'>;
	current: IBlockType;
	config: UserConfig;
}

function MColorPicker(props: MInputProps) {
	const initialValues = '#000000';
	console.log('颜色选择器', props);

	const option = useMemo(() => {
		console.log('颜色选择器', props);
		return props.data.option || {};
	}, [props.data]);
	const store = props.config.getStore();

	return (
		<Row style={{ padding: '10px' }}>
			<Col span={6} style={{ lineHeight: '30px' }}>
				{option.label || '文字'}：
			</Col>
			<Col span={18}>
				<ProFormColorPicker
					label={option.label || '文字'}
					name="颜色选择"
					initialValue={initialValues}
					fieldProps={{
						onChange: (re) => {
							const receive = (option as any).receive;
							const clonedata = deepCopy(store.getData());
							const newblock = clonedata.block.map((v: IBlockType) => {
								if (v.id === props.current.id) {
									v.props[receive] = re;
								}
								return v;
							});
							store.setData({ ...clonedata, block: [...newblock] });
						},
						value: props.current.props[option.receive!] || option?.initValue || '#000000',
					}}
				/>
			</Col>
		</Row>
	);
}

export default memo(MColorPicker);
