import { useEffect, useState } from 'react';
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Form, Input } from 'antd';
import { DictValueEnumObj } from '@/components/DictTag';

export type ListFormProps = {
  onCancel: (flag?: boolean, formVals?: unknown) => void;
  onSubmit: (values: API.ApplicationProducts.Product) => Promise<void>;
  open: boolean;
  values?: Partial<API.ApplicationProducts.Product>;
  // jobGroupOptions: DictOptionType[];
  companyLabelEnum?: DictValueEnumObj;
  companyNatureEnum?: DictValueEnumObj;
  enableStatusEnum?: DictValueEnumObj;
};

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const listEdit: React.FC<ListFormProps> = (props) => {
  const [form] = Form.useForm();
  const [colorHex, setColorHex] = useState('#3b82f6');
  const { companyNatureEnum, companyLabelEnum, enableStatusEnum } = props;

  useEffect(() => {
    form.resetFields();
    if (props.values) {
      form.setFieldsValue({
        ...props.values,
        status: String(props.values.status),
      });
      setColorHex(props.values.backgroudColor);
    }
  }, [form, props]);

  const handleCancel = () => {
    props.onCancel();
    form.resetFields();
  };

  const handleFinish = async (values: Record<string, any>) => {
    console.log(colorHex, values);
    if (typeof colorHex === 'string') {
      values.backgroudColor = colorHex;
    } else {
      values.backgroudColor = values.backgroudColor.toHexString();
    }
    if (!values.companyNature) {
      values['companyNature'] = '';
    }
    if (!values.targ) {
      values['targ'] = '';
    }
    props.onSubmit(values as API.ApplicationProducts.Product);
  };
  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title={`${props.values ? '编辑' : '新增'}企业`}
      form={form}
      autoFocusFirstInput
      open={props.open}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => handleCancel(),
      }}
      submitTimeout={2000}
      onFinish={handleFinish}
      initialValues={{
        cardOrder: 0,
        status: '0',
      }}
    >
      <ProFormDigit label="InputNumber" name="companyCardId" disabled hidden={true} />
      <ProForm.Group>
        <ProFormText width="md" name="name" label="卡片名称" placeholder="请输入卡片名称" />
        <ProFormSelect
          width="md"
          name="backgroudColor"
          label="卡片背景色"
          valueType="color"
          disabledAlpha
          placeholder="请选择单位规模"
          fieldProps={{
            value: colorHex,
            onChange: (e) => setColorHex(e),
          }}
        />
        {/*<span>HEX: {colorHex.}</span>*/}
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          width="md"
          name="companyNature"
          label="企业性质"
          valueEnum={companyNatureEnum}
          placeholder="请选择企业性质"
        />
        <ProFormSelect
          width="md"
          name="targ"
          label="企业标签"
          valueEnum={companyLabelEnum}
          placeholder="请选择企业标签"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormDigit width="md" label="排序" name="cardOrder" min={0} />
        <ProFormRadio.Group
          valueEnum={enableStatusEnum}
          name="status"
          label="启用状态"
          width="md"
        />
      </ProForm.Group>
      <ProForm.Item name="description" label="精选描述">
        <Input.TextArea
          placeholder="请输入卡片精选描述（最多200字）"
          maxLength={200}
          showCount
          rows={4}
          style={{ resize: 'none' }}
        />
      </ProForm.Item>
    </ModalForm>
  );
};

export default listEdit;
