import React, { useEffect, useState } from 'react';
import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormRadio,
  ProFormTreeSelect,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Form, Modal } from 'antd';
import { useIntl, FormattedMessage } from '@umijs/max';
import { DataNode } from 'antd/es/tree';
import { createIcon } from '@/utils/IconUtil';
import { DictValueEnumObj } from '@/components/DictTag';
import IconSelector from '@/components/IconSelector';

export type MenuFormData = Record<string, unknown> & Partial<API.System.Menu>;

export type MenuFormProps = {
  onCancel: (flag?: boolean, formVals?: MenuFormData) => void;
  onSubmit: (values: MenuFormData) => Promise<void>;
  open: boolean;
  values: Partial<API.System.Menu>;
  visibleOptions: DictValueEnumObj;
  statusOptions: DictValueEnumObj;
  menuTree: DataNode[];
};

const MenuForm: React.FC<MenuFormProps> = (props) => {

  const [form] = Form.useForm();

  const [menuType, setmenuType] = useState<any>('M');
  const [isFrame, setIsFrame] = useState<any>('1');
  const [menuIconName, setMenuIconName] = useState<any>();
  const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);

  const { menuTree, visibleOptions, statusOptions } = props;

  useEffect(() => {
    form.resetFields();
    setMenuIconName(props.values.icon);
    setmenuType(props.values.menuType)
    setIsFrame(props.values.isFrame)
    form.setFieldsValue({
      id: props.values.id,
      name: props.values.name,
      parentId: props.values.parentId,
      orderNum: props.values.orderNum,
      path: props.values.path,
      component: props.values.component,
      query: props.values.query,
      isFrame: props.values.isFrame,
      isCache: props.values.isCache,
      menuType: props.values.menuType,
      visible: props.values.visible,
      status: props.values.status,
      perms: props.values.perms,
      icon: props.values.icon,
      createBy: props.values.createBy,
      createTime: props.values.createTime,
      updateBy: props.values.updateBy,
      updateTime: props.values.updateTime,
      remark: props.values.remark,
    });
  }, [form, props]);
  

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: Record<string, any>) => {
    props.onSubmit(values as MenuFormData);
  };

  return (
    <Modal
      width={640}
      title={'编辑菜单权限'}
      open={props.open}
      forceRender
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        grid={true}
        submitter={false}
        layout="horizontal"
        onFinish={handleFinish}>
        <ProFormDigit
          name="id"
          label={'菜单编号'}
          placeholder="请输入菜单编号"
          disabled
          hidden={true}
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入菜单编号！" defaultMessage="请输入菜单编号！" />,
            },
          ]}
        />
        <ProFormTreeSelect
          name="parentId"
          label={'上级菜单'}
          params={{ menuTree }}
          request={async () => {
            return [{
              name: "全部",
              id: 0,
              children: menuTree
            }];
          }}
          placeholder="请输入父菜单编号"
          fieldProps={{
            defaultValue: 0,
            fieldNames: {
              label: "name",
              value: "id"
            },
          }}
        />
        <ProFormRadio.Group
          name="menuType"
          options={[
            {
              label: '目录',
              value: 'M',
            },
            {
              label: '菜单',
              value: 'C',
            },
            {
              label: '按钮',
              value: 'F',
            },
          ]}
          label={'菜单类型'}
          placeholder="请输入菜单类型"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入菜单类型！" defaultMessage="请输入菜单类型！" />,
            },
          ]}
          fieldProps={{
            onChange: (e) => {
              setmenuType(e.target.value);
            },
          }}
        />
        <ProFormSelect
          name="icon"
          label={'菜单图标'}
          valueEnum={{}}
          hidden={menuType === 'F'}
          addonBefore={createIcon(menuIconName)}
          fieldProps={{
            onClick: () => {
              setIconSelectorOpen(true);
            },
          }}
          placeholder="请输入菜单图标"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入菜单图标！" defaultMessage="请输入菜单图标！" />,
            },
          ]}
        />
        <ProFormText
          name="name"
          label={'菜单名称'}
          colProps={{ md: 12, xl: 12 }}
          placeholder="请输入菜单名称"
          rules={[
            {
              required: true,
              message: <FormattedMessage id="请输入菜单名称！" defaultMessage="请输入菜单名称！" />,
            },
          ]}
        />
        <ProFormDigit
          name="orderNum"
          label={'显示顺序'}
          width="lg"
          colProps={{ md: 12, xl: 12 }}
          placeholder="请输入显示顺序"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入显示顺序！" defaultMessage="请输入显示顺序！" />,
            },
          ]}
          fieldProps={{
            defaultValue: 1
          }}
        />
        {/* <ProFormRadio.Group
          name="isFrame"
          valueEnum={{
            '0': '是',
            '1': '否',
          }}
          initialValue="1"
          label={'是否为外链'}
          placeholder="请输入是否为外链"
          hidden={menuType === 'F'}
          rules={[
            {
              required: false,
              message: '请选择是否为外链！',
            },
          ]}
          fieldProps={{
            onChange: (e) => {
              setIsFrame(e.target.value);
            },
          }}
        /> */}
        <ProFormText
          name="path"
          label={'路由地址'}
          width="lg"
          colProps={{ md: 12, xl: 12 }}
          placeholder="请输入路由地址"
          hidden={menuType === 'F'}
          rules={[
            {
              required: menuType !== 'F',
              message: <FormattedMessage id="请输入路由地址！" defaultMessage="请输入路由地址！" />,
            },
          ]}
        />
        <ProFormText
          name="perms"
          label={'权限标识'}
          colProps={{ md: 12, xl: 12 }}
          placeholder="请输入权限标识"
          hidden={menuType === 'M'}
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入权限标识！" defaultMessage="请输入权限标识！" />,
            },
          ]}
        />
        {/* <ProFormRadio.Group
          name="visible"
          valueEnum={visibleOptions}
          label={'显示状态'}
          colProps={{ md: 12, xl: 12 }}
          placeholder="请输入显示状态"
          hidden={menuType === 'F'}
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入显示状态！" defaultMessage="请输入显示状态！" />,
            },
          ]}
          fieldProps={{
            defaultValue: '0'
          }}
        />
        <ProFormRadio.Group
          valueEnum={statusOptions}
          name="status"
          label={'菜单状态'}
          colProps={{ md: 12, xl: 12 }}
          placeholder="请输入菜单状态"
          hidden={menuType === 'F'}
          rules={[
            {
              required: true,
              message: <FormattedMessage id="请输入菜单状态！" defaultMessage="请输入菜单状态！" />,
            },
          ]}
          fieldProps={{
            defaultValue: '0'
          }}
        /> */}
      </ProForm>
      <Modal
        width={800}
        open={iconSelectorOpen}
        onCancel={() => {
          setIconSelectorOpen(false);
        }}
        footer={null}
      >
        <IconSelector
          onSelect={(name: string) => {
            form.setFieldsValue({ icon: name });
            setMenuIconName(name);
            setIconSelectorOpen(false);
          }}
        />
      </Modal>
    </Modal>
  );
};

export default MenuForm;
