import {ModalForm, ProForm, ProFormDependency, ProFormRadio} from '@ant-design/pro-components';
import {ProFormText} from '@ant-design/pro-components';
import {ProFormSwitch} from '@ant-design/pro-components';
import {ProFormSelect, ProFormDigit} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import React, {useEffect, useState} from 'react';
import {App, Button, Form, message, Modal} from 'antd';
import {putMenuUpdateMenu} from "@/services/system/Menu";
import {createIcon} from "@/utils/IconUtil";
import IconSelector from "@/components/IconSelector";
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(()=>{
    setMenuIconName(props.values.icon)
  }, [props.updateModalOpen])

  return (
    <ModalForm<API.Menu>
      title={intl.formatMessage({
        id: 'common.modal.table.create.title',
        defaultMessage: '$$$',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        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="md" name="id" label="id" disabled={true} initialValue={props.values.id}/>
        <ProFormSelect width="md" name="parentId"
                       disabled={true}
                       initialValue={parentId}
                       request={async () => parentSelectOptions}
                       label={<FormattedMessage id="system.menu.table.list.parentId" defaultMessage="$$$"/>}
                       placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.parentId', defaultMessage: '$$$'})}`}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormRadio.Group width="md" 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="md" 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="md" 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="md" 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="md" 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="md" 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
                    name="icon"
                    label={intl.formatMessage({
                      id: 'system.menu.table.list.icon',
                      defaultMessage: '$$$',
                    })}
                    valueEnum={{}}
                    hidden={record.type !== 'M'}
                    addonBefore={createIcon(menuIconName)}
                    fieldProps={{
                      onClick: () => {
                        setIconSelectorOpen(true);
                      },
                    }}
                    initialValue={props.values.icon}
                    placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.icon', defaultMessage: '$$$'})}`}
                    rules={[
                      {
                        required: false,
                        message: <FormattedMessage id="请输入菜单图标！" defaultMessage="请输入菜单图标！"/>,
                      },
                    ]}
                  />
                </ProForm.Group>
              )
            }
          }
        }

      </ProFormDependency>
      <ProForm.Group>
        <ProFormDependency name={['type']}>
          {
            (record) => {
              return (
                <ProFormText width="md" 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="md" 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="md" name="hidden" initialValue={props.values.hidden}
                       label={<FormattedMessage id="system.menu.table.list.hidden" defaultMessage="$$$"/>}
                       required={false}>

        </ProFormSwitch>
      </ProForm.Group>
      <Modal
        width={800}
        open={iconSelectorOpen}
        onCancel={() => {
          setIconSelectorOpen(false);
        }}
        footer={null}
      >
        <IconSelector
          onSelect={(name: string) => {
            form.setFieldsValue({icon: name});
            setMenuIconName(name);
            setIconSelectorOpen(false);
          }}
        />
      </Modal>


    </ModalForm>)
}
export default UpdateForm;
