import BaseForm from '@/components/BaseForm';
import { findMenus } from '@/services/common/menus';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import type { RadioChangeEvent } from 'antd';
import { Col, Form, FormProps, Row } from 'antd';
import { useEffect, useState } from 'react';
import style from '../index.less';
import { iconFront } from './iconfont';

type MenuSettingFormType = {
  initialValues?: {
    [key: string]: any;
  };
  onSave: (values: any) => void;
  isEdit: boolean;
  handelSubmit: number;
  isAddChild: boolean;
};

const MenuSettingForm = ({
  onSave,
  initialValues,
  handelSubmit,
}: MenuSettingFormType) => {
  const [form] = Form.useForm();
  const intl = useIntl();
  const [selected, setSelected] = useState<any>(null);
  const [isFrame, setIsFrame] = useState<any>(true);
  const [version, setVersion] = useState<number>();

  const [isUnfold, setIsUnfold] = useState<boolean>(false);

  const iconRender = () => {
    return (
      <div>
        <Row
          className={isUnfold ? 'menu-unfold' : 'menu-pack'}
          gutter={[0, 16]}
        >
          {Object.keys(iconFront).map((key) => {
            const isSelected = key === selected;
            const itemClassName = `${style['icon-pitch']} ${
              isSelected ? style['selected'] : ''
            }`;

            return (
              <Col
                span={2}
                key={key}
                className={itemClassName}
                onClick={() => setSelected(key)}
              >
                <div className={style['icon-fize']}>{iconFront[key]}</div>
              </Col>
            );
          })}
        </Row>
        {Object.keys(iconFront).length > 20 ? (
          <div onClick={() => setIsUnfold(!isUnfold)} className="unfold-pack">
            {isUnfold ? (
              <>
                <UpOutlined className="margin-r-s" />
                {intl.formatMessage({ id: 'columns.handel.retract' })}
              </>
            ) : (
              <>
                <DownOutlined className="margin-r-s" />
                {intl.formatMessage({ id: 'columns.handel.unfold' })}
              </>
            )}
          </div>
        ) : null}
      </div>
    );
  };

  let itemColumn = [
    {
      type: 'input',
      itemProps: {
        name: 'name',
        label: intl.formatMessage({
          id: 'menu.columns.title.name',
        }),
        rules: [
          {
            required: true,
            message: intl.formatMessage(
              {
                id: 'form.rules.required',
              },
              {
                label: intl.formatMessage({
                  id: 'menu.columns.title.name',
                }),
              },
            ),
          },
        ],
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.info.text.entrt',
        }),
        maxLength: 30,
      },
    },
    {
      type: 'custom',
      itemProps: {
        name: 'icon',
        label: intl.formatMessage({
          id: 'menu.columns.title.privilegeIcon',
        }),
      },
      render: iconRender,
    },
    {
      type: 'radio',
      itemProps: {
        name: 'isFrame',
        label: intl.formatMessage({
          id: 'menu.columns.title.outreachOrNot',
        }),
        rules: [{ required: true }],
      },
      elementProps: {
        placeholder: intl.formatMessage({
          id: 'form.select.rules.pleaseSelect',
        }),
        disabled: true,
        onChange: (event: RadioChangeEvent) => {
          setIsFrame(!event.target.value);
        },
      },

      options: [
        {
          key: true,
          label: intl.formatMessage({ id: 'columns.handel.yes' }),
          value: true,
        },
        {
          key: false,
          label: intl.formatMessage({ id: 'columns.handel.no' }),
          value: false,
        },
      ],
    },
    !isFrame
      ? {
          type: 'input',
          itemProps: {
            name: 'path',
            label: intl.formatMessage({
              id: 'menu.columns.title.privilegeUrl',
            }),
          },
          elementProps: {
            disabled: isFrame,
            placeholder: intl.formatMessage({
              id: 'form.info.text.entrt',
            }),
          },
        }
      : {},
  ];

  const config: FormProps = {
    form: form,
    layout: 'vertical',
    initialValues: { ...initialValues },
  };

  useEffect(() => {
    // 校验表单，成功提交表单的数据给onSave
    if (handelSubmit !== 0) {
      form
        .validateFields()
        .then((values) => {
          values.icon = selected;
          values.version = version;
          values.menuId = initialValues?.menuId;
          onSave(values);
        })
        .catch((errorInfo) => {
          console.log('Failed:', errorInfo);
        });
    } else {
      form.resetFields();
    }
  }, [handelSubmit]);

  useEffect(() => {
    findMenus({ menuId: initialValues?.menuId }).then((resp) => {
      const data = resp.data;
      form.setFieldsValue({ ...data });
      setSelected(data?.icon);
      setIsFrame(!data.isFrame);
      setVersion(data?.version);
    });
  }, [initialValues]);

  return <BaseForm config={config} itemColumn={itemColumn} />;
};

export default MenuSettingForm;