import {
  MyColorPicker,
  MyIconSelect,
  MyMoneyInput,
  MyPercentInput,
  MyUploadImages,
  rulesHelper,
} from '@/common';
import { ProFormColumnsType } from '@ant-design/pro-components';
// import { MyRichText } from '../components/FormFields/MyRichText';

type ReturnType = ProFormColumnsType<any, 'text'>;
type PropsType = { required?: boolean } & ReturnType;

export const MyFormItems = {
  Text(props: PropsType): ReturnType {
    return {
      formItemProps: {
        ...(props?.required ? rulesHelper.text : {}),
      },
      ...props,
    };
  },
  Integer(props: { min?: number } & PropsType): ReturnType {
    return {
      valueType: 'digit',
      formItemProps: {
        ...(props?.required ? rulesHelper.number : {}),
      },
      fieldProps: {
        min: props.min ?? 1,
      },
      ...props,
    };
  },
  Numeric(props: PropsType): ReturnType {
    return {
      valueType: 'digit',
      formItemProps: {
        ...(props?.required ? rulesHelper.number : {}),
      },
      fieldProps: {
        precision: 2,
        min: 0,
      },
      ...props,
    };
  },

  UploadImages({
    max = 1,
    help,
    uploadType = 'image',
    ...rest
  }: {
    max?: number;
    help?: string;
    uploadType?: 'image' | 'file' | 'video' | 'audio' | undefined;
  } & PropsType): ReturnType {
    return {
      renderFormItem() {
        return <MyUploadImages max={max} uploadType={uploadType} />;
      },
      formItemProps: {
        help,
        ...(rest.required ?? false ? rulesHelper.upload({ max }) : {}),
      },
      ...rest,
    };
  },
  EnumRadio(props: PropsType): ReturnType {
    return {
      valueType: 'radioButton',
      proFieldProps: {
        placeholder: `请选择${props.title}`,
      },
      formItemProps: {
        ...(props?.required ? rulesHelper.text : {}),
      },
      fieldProps: {
        buttonStyle: 'solid',
      },
      ...props,
    };
  },
  EnumCheckbox(props: PropsType): ReturnType {
    return {
      valueType: 'checkbox',
      proFieldProps: {
        placeholder: `请选择${props.title}`,
      },
      formItemProps: {
        ...(props?.required ? rulesHelper.array : {}),
      },
      ...props,
    };
  },
  EnumSelect(props: PropsType): ReturnType {
    return {
      valueType: 'select',
      proFieldProps: {
        placeholder: `请选择`,
      },
      formItemProps: {
        ...(props?.required ? rulesHelper.text : {}),
      },
      ...props,
    };
  },
  Switch(props: PropsType): ReturnType {
    return {
      valueType: 'switch',
      initialValue: props.initialValue ?? false,
      ...props,
    };
  },
  DatePicker(props: PropsType): ReturnType {
    return {
      valueType: 'date',
      formItemProps: {
        ...(props?.required ? rulesHelper.text : {}),
      },
      ...props,
    };
  },
  Select(props: PropsType): ReturnType {
    return {
      valueType: 'select',
      proFieldProps: {
        placeholder: `请选择${props.title}`,
      },
      ...props,
    };
  },
  // EnumSelect(props: PropsType): ReturnType {
  //   const valueType = props.valueType ?? 'radioButton';
  //   const buttonStyle =
  //     valueType === 'radioButton'
  //       ? {
  //           buttonStyle: 'solid',
  //         }
  //       : {};

  // },
  IconSelect(props?: PropsType): ReturnType {
    return {
      key: 'icon',
      title: '图标',
      renderFormItem: () => <MyIconSelect />,
      ...props,
    };
  },
  ColorPicker(props?: PropsType): ReturnType {
    return {
      key: 'color',
      dataIndex: 'color',
      title: '颜色',
      renderFormItem: () => <MyColorPicker />,
      ...props,
    };
  },
  Percent(props?: PropsType): ReturnType {
    return {
      renderFormItem: () => <MyPercentInput />,
      formItemProps: {
        ...(props?.required ? rulesHelper.number : {}),
      },
      ...props,
    };
  },
  Money(props?: PropsType): ReturnType {
    return {
      renderFormItem: () => <MyMoneyInput />,
      formItemProps: {
        ...(props?.required ? rulesHelper.number : {}),
      },
      ...props,
    };
  },
};