import {ProCard, ProFormList, ProFormSelect} from '@ant-design/pro-components';
import {useEffect, useState} from 'react';
import {CascaderSetting} from '../components/cascader';
import {CheckboxSetting} from '../components/checkbox';
import {CheckboxGroupSetting} from '../components/checkboxGroup';
import {DateRangeSetting} from '../components/date-range';
import {InputSetting} from '../components/input';
import {MultipleComponentsSetting} from '../components/multipleComponents';
import {RadioSetting} from '../components/radio';
import {SelectSetting} from '../components/select';
import {SwitchSetting} from '../components/switch';
import {TextareaSetting} from '../components/textarea';
import {TreeSelectSetting} from '../components/tree-select';

const FieldItem: React.FC<{ action: any }> = ({ action }) => {
  const [valueType, setValueType] = useState('');
  const rowData = action.getCurrentRowData();

  const options = [
    { value: 'input', label: 'input' },
    { value: 'select', label: 'select' },
    { value: 'dateRange', label: 'dateRange' },
    { value: 'cascader', label: 'cascader' },
    { value: 'treeSelect', label: 'treeSelect' },
    { value: 'checkbox', label: 'checkbox' },
    { value: 'checkboxGroup', label: 'checkboxGroup' },
    { value: 'radioGroup', label: 'radioGroup' },
    { value: 'multipleComponents', label: 'multipleComponents' }
  ];

  const componentConfig: Record<string, () => JSX.Element> = {
    input: () => <InputSetting />,
    select: () => <SelectSetting />,
    dateRange: () => <DateRangeSetting />,
    cascader: () => <CascaderSetting />,
    treeSelect: () => <TreeSelectSetting />,
    textArea: () => <TextareaSetting />,
    checkbox: () => <CheckboxSetting />,
    checkboxGroup: () => <CheckboxGroupSetting />,
    radioGroup: () => <RadioSetting />,
    switch: () => <SwitchSetting />,
    multipleComponents: () => <MultipleComponentsSetting />,
  };

  useEffect(() => {
    if (rowData.valueType) {
      setValueType(rowData.valueType);
    }
  }, [rowData]);

  return (
    <>
      <ProFormSelect
        name='valueType'
        label="选择类型"
        options={options}
        onChange={(v) => setValueType(v as string)}
      />
      {componentConfig[valueType]?.()}
    </>
  );
};

export const getFieldSettings = () => {

  return (
    <ProFormList
      name="fieldsConfig"
      label=""
      creatorButtonProps={{
        creatorButtonText: '添加新字段',
        position: "bottom",
        style: {marginTop: 10}
      }}
      itemRender={({ listDom, action }, { record,index }) => {
        return (
          <ProCard
            size="small"
            key={index}
            collapsible
            defaultCollapsed
            extra={action}
            title={record?.field}
            style={{
              borderBottom: '1px solid #ddd',
              borderRadius: 0,
              background: 'rgb(241 241 241 / 20%)'
            }}
            headStyle={{
              padding: 10,
            }}
          >
            {listDom}
          </ProCard>
        );
      }}
    >
      {(_, idx, action) => <FieldItem action={action} />}
    </ProFormList>
  )
};