import {
  ModalForm,
  ProCard,
  ProFormList,
  ProFormRadio,
  ProFormText,
} from '@ant-design/pro-components';
import { Col, Form, Row, message } from 'antd';
import React from 'react';
import { OPTIONS } from '../../../constants';
import { ButtonController } from '../../../services';
interface EditFormProps {
  title: string;
  type: 'add' | 'update';
  trigger: JSX.Element;
  onOk?: () => void;
}

interface ButtonFields {
  buttonName: string;
  perms: string;
  status: string;
  remark: string;
}

interface ModalFormProps {
  menuName: string;
  menuPath: string;
  buttonList: ButtonFields[];
}

const defaultCol = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

const EditForm: React.FC<EditFormProps> = ({ trigger, title, onOk }) => {
  const [form] = Form.useForm<ModalFormProps>();

  return (
    <ModalForm<ModalFormProps>
      width={1200}
      layout="horizontal"
      title={title}
      trigger={trigger}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const { buttonList = [], menuName, menuPath } = values || {};
        if (buttonList.length === 0) {
          message.error('按钮不能为空！');
          return false;
        }
        const buttonApis = buttonList.map((buttonInfo) => {
          return ButtonController.addApi({ menuName, menuPath, ...buttonInfo });
        });
        await Promise.all(buttonApis);
        message.success('提交成功');
        onOk?.();
        return true;
      }}
    >
      <Row>
        <Col span={12}>
          <ProFormText
            {...defaultCol}
            name="menuName"
            label="菜单名称"
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={12}>
          <ProFormText
            {...defaultCol}
            name="menuPath"
            label="菜单路由"
            rules={[{ required: true }]}
          />
        </Col>
      </Row>
      <ProFormList
        name="buttonList"
        initialValue={[
          {
            remark: '',
            status: '1',
            buttonName: '',
            perms: '',
          },
        ]}
        creatorButtonProps={{
          position: 'bottom',
          creatorButtonText: '新建按钮',
        }}
        itemRender={({ listDom, action }) => {
          return (
            <div style={{ display: 'flex', marginBottom: 8 }}>
              <ProCard bordered>{listDom}</ProCard>
              {action}
            </div>
          );
        }}
      >
        <Row>
          <Col span={12}>
            <ProFormText
              {...defaultCol}
              name="buttonName"
              label="按钮名称"
              rules={[{ required: true }]}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              {...defaultCol}
              name="perms"
              label="权限字符"
              rules={[{ required: true }]}
            />
          </Col>
          <Col span={12}>
            <ProFormRadio.Group
              {...defaultCol}
              label="状态"
              name="status"
              initialValue={'1'}
              options={OPTIONS.OPTIONS_AVAILABLE}
            />
          </Col>
          <Col span={12}>
            <ProFormText {...defaultCol} label="备注" name="remark" />
          </Col>
        </Row>
      </ProFormList>
    </ModalForm>
  );
};

export default EditForm;
