import IconSelector from '@/components/IconSelector';
import { putMenuUpdateMenu } from '@/services/system/Menu';
import { createIcon } from '@/utils/IconUtil';
import {
  ModalForm,
  ProForm,
  ProFormDependency,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, Modal, message } from 'antd';
import React, { useEffect, useState } from 'react';
// 表单宽度 804 两列
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
import { proIconSelectStyle, proIconSelectWrapStyle } from '../../../../../config/defaultIcon';
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.Menu>;

export type UpdateFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.Menu>;
  reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.Menu>();
  const [menuIconName, setMenuIconName] = useState<any>();
  const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);
  const [parentId, setParentId] = useState<number>(0);
  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
    { label: '根节点', value: 0 },
  ]);

  useEffect(() => {
    setIconSelectorOpen(false);
    setMenuIconName(props.values.icon);
  }, [props.updateModalOpen]);

  return (
    <ModalForm<API.Menu>
      width={proFormModelWidth}
      title={intl.formatMessage({
        id: 'system.menu.table.list.update',
        defaultMessage: '$$$',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        setMenuIconName('');
        console.log(values);
        putMenuUpdateMenu(values)
          .then(() => {
            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
            props.reload();
          })
          .catch(() => {
            message.error(intl.formatMessage({ id: 'common.error', defaultMessage: '$$$' }));
          });
        props.handleModal();
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="id"
          label="id"
          disabled={true}
          initialValue={props.values.id}
        />
        <ProFormSelect
          width={proFormItemStyleProps.column2Width}
          name="parentId"
          disabled={true}
          initialValue={parentId}
          request={async () => parentSelectOptions}
          label={<FormattedMessage id="system.menu.table.list.parentId" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_select',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'system.menu.table.list.parentId',
            defaultMessage: '$$$',
          })}`}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormRadio.Group
          width={proFormItemStyleProps.column2Width}
          name="type"
          required={true}
          label={<FormattedMessage id="system.menu.table.list.type" defaultMessage="$$$" />}
          initialValue={props.values.type}
          disabled={true}
          options={[
            {
              label: intl.formatMessage({
                id: 'system.menu.table.list.type_M',
                defaultMessage: '$$$',
              }),
              value: 'M',
            },
            {
              label: intl.formatMessage({
                id: 'system.menu.table.list.type_C',
                defaultMessage: '$$$',
              }),
              value: 'C',
            },
            {
              label: intl.formatMessage({
                id: 'system.menu.table.list.type_F',
                defaultMessage: '$$$',
              }),
              value: 'F',
            },
            {
              label: intl.formatMessage({
                id: 'system.menu.table.list.type_E',
                defaultMessage: '$$$',
              }),
              value: 'E',
            },
          ]}
        ></ProFormRadio.Group>
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="title"
          label={<FormattedMessage id="system.menu.table.list.title" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({ id: 'system.menu.table.list.title', defaultMessage: '$$$' })}`}
          required={true}
          initialValue={props.values.title}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="system.menu.table.rule.required.name"
                  defaultMessage="name is required"
                />
              ),
            },
          ]}
        />
        <ProFormDigit
          width={proFormItemStyleProps.column2Width}
          fieldProps={{ precision: 0 }}
          name="sort"
          label={<FormattedMessage id="system.menu.table.list.sort" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({ id: 'system.menu.table.list.sort', defaultMessage: '$$$' })}`}
          initialValue={props.values.sort}
        />
      </ProForm.Group>
      <ProFormDependency name={['type']}>
        {(record) => {
          let isShow = record.type !== 'F' && record.type !== 'E';
          if (isShow) {
            return (
              <ProForm.Group>
                <ProFormText
                  width={proFormItemStyleProps.column2Width}
                  name="name"
                  label={<FormattedMessage id="system.menu.table.list.name" defaultMessage="$$$" />}
                  placeholder={`${intl.formatMessage({
                    id: 'common.please_input',
                    defaultMessage: '$$$',
                  })}${intl.formatMessage({
                    id: 'system.menu.table.list.name',
                    defaultMessage: '$$$',
                  })}`}
                  required={true}
                  initialValue={props.values.name}
                  rules={[
                    {
                      required: true,
                      message: (
                        <FormattedMessage
                          id="system.menu.table.rule.required.name"
                          defaultMessage="name is required"
                        />
                      ),
                    },
                  ]}
                />
                <ProFormText
                  width={proFormItemStyleProps.column2Width}
                  name="path"
                  label={<FormattedMessage id="system.menu.table.list.path" defaultMessage="$$$" />}
                  placeholder={`${intl.formatMessage({
                    id: 'common.please_input',
                    defaultMessage: '$$$',
                  })}${intl.formatMessage({
                    id: 'system.menu.table.list.path',
                    defaultMessage: '$$$',
                  })}`}
                  required={true}
                  initialValue={props.values.path}
                  rules={[
                    {
                      required: true,
                      message: (
                        <FormattedMessage
                          id="system.menu.table.rule.required.name"
                          defaultMessage="name is required"
                        />
                      ),
                    },
                  ]}
                />
                <ProFormText
                  width={proFormItemStyleProps.column2Width}
                  name="component"
                  label={
                    <FormattedMessage id="system.menu.table.list.component" defaultMessage="$$$" />
                  }
                  placeholder={`${intl.formatMessage({
                    id: 'common.please_input',
                    defaultMessage: '$$$',
                  })}${intl.formatMessage({
                    id: 'system.menu.table.list.component',
                    defaultMessage: '$$$',
                  })}`}
                  required={true}
                  initialValue={props.values.component}
                  hidden={record.type === 'M'}
                  // disabled={record.type === 'M'}
                />

                <ProFormSelect
                  width={proFormItemStyleProps.column2Width}
                  name="icon"
                  label={intl.formatMessage({
                    id: 'system.menu.table.list.icon',
                    defaultMessage: '$$$',
                  })}
                  valueEnum={{}}
                  hidden={record.type !== 'M'}
                  addonBefore={createIcon(menuIconName)}
                  fieldProps={{
                    labelInValue: true,
                    notFoundContent: null, // 将选项内容为空隐去，使用自定义的图标选择组件
                    filterOption: false,
                    onClick: () => {
                      setIconSelectorOpen(!iconSelectorOpen);
                    },
                    onClear: () => {
                      setMenuIconName('');
                    },
                  }}
                  initialValue={props.values.icon}
                  placeholder={`${intl.formatMessage({
                    id: 'common.please_select',
                    defaultMessage: '$$$',
                  })}${intl.formatMessage({
                    id: 'system.menu.table.list.icon',
                    defaultMessage: '$$$',
                  })}`}
                  rules={[
                    {
                      required: false,
                      message: (
                        <FormattedMessage id="请选择菜单图标！" defaultMessage="请选择菜单图标！" />
                      ),
                    },
                  ]}
                />
                                <div style={proIconSelectWrapStyle}>
                  {iconSelectorOpen ? (
                    <div style={proIconSelectStyle}>
                      <IconSelector
                        onSelect={(name: string) => {
                          form.setFieldsValue({ icon: name });
                          setMenuIconName(name);
                          setIconSelectorOpen(false);
                        }}
                      />
                    </div>
                  ) : (
                    ''
                  )}
                </div>
              </ProForm.Group>
            );
          }
        }}
      </ProFormDependency>
      <ProForm.Group>
        <ProFormDependency name={['type']}>
          {(record) => {
            return (
              <ProFormText
                width={proFormItemStyleProps.column2Width}
                name="permission"
                initialValue={props.values.permission}
                label={
                  <FormattedMessage id="system.menu.table.list.permission" defaultMessage="$$$" />
                }
                placeholder={`${intl.formatMessage({
                  id: 'common.please_input',
                  defaultMessage: '$$$',
                })}${intl.formatMessage({
                  id: 'system.menu.table.list.permission',
                  defaultMessage: '$$$',
                })}`}
                disabled={record.type === 'M'}
              />
            );
          }}
        </ProFormDependency>
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="remark"
          initialValue={props.values.remark}
          label={<FormattedMessage id="system.menu.table.list.remark" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({ id: 'system.menu.table.list.remark', defaultMessage: '$$$' })}`}
          required={false}
        />
        <ProFormSwitch
          width={proFormItemStyleProps.column2Width}
          name="hidden"
          initialValue={props.values.hidden}
          label={<FormattedMessage id="system.menu.table.list.hidden" defaultMessage="$$$" />}
          required={false}
        ></ProFormSwitch>
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateForm;
