import { FC } from "react";
import { Form, Input, Modal, ModalProps, Radio, Select } from "antd";
import style from "../AddIndexModal/index.module.scss";

export interface AddRoleModalProps extends Omit<ModalProps, "onOk"> {
  onCancel?: () => void;
  onOk?: () => void;
}

export const MUSEUM_LEVEL_LIST = [
  {
    label: "一级",
    value: 1,
  },
  {
    label: "二级",
    value: 2,
  },
  {
    label: "三级",
    value: 3,
  },
];

const { TextArea } = Input;

export const AddRoleModal: FC<AddRoleModalProps> = ({
  open,
  onOk,
  onCancel,
  ...rest
}) => {
  const [form] = Form.useForm<any>();

  const handleCancel = () => {
    form.resetFields();
    onCancel?.();
  };

  const handleConfirm = () => {
    form.submit();
  };

  const handleSubmit = async (values: any) => {
    onOk?.();
    handleCancel();
  };

  return (
    <Modal
      className={style.modal}
      title="新增角色"
      okText="提交"
      cancelText="取消"
      open={open}
      width={640}
      okButtonProps={{
        disabled: false,
      }}
      onOk={handleConfirm}
      onCancel={handleCancel}
      {...rest}
    >
      <Form
        labelCol={{ span: 4, offset: 2 }}
        form={form}
        onFinish={handleSubmit}
      >
        <Form.Item
          label="部门名称"
          name="name"
          required
          rules={[{ required: true, message: "请输入部门名称" }]}
        >
          <Input placeholder="请输入内容，最多20字" maxLength={20} />
        </Form.Item>
        <Form.Item
          label="博物馆级别"
          name="level"
          required
          rules={[{ required: true, message: "请选择博物馆级别" }]}
        >
          <Radio.Group
            options={MUSEUM_LEVEL_LIST}
            optionType="button"
            buttonStyle="solid"
          />
        </Form.Item>
        <Form.Item label="组别说明" name="description">
          <TextArea
            rows={4}
            placeholder="请输入内容，最多200字"
            maxLength={200}
          />
        </Form.Item>
        <Form.Item
          label="部门主管"
          required
          rules={[{ required: true, message: "请选择部门主管" }]}
        >
          <Select mode="multiple" placeholder="请选择" />
        </Form.Item>
        <Form.Item label="部门成员">
          <Select mode="multiple" placeholder="请选择" />
        </Form.Item>
        <Form.Item label="自评权限" required>
          <Form.Item noStyle name="rating" initialValue={0}>
            <Radio.Group
              options={[
                {
                  label: "是",
                  value: 1,
                },
                {
                  label: "否",
                  value: 0,
                },
              ]}
            />
          </Form.Item>

          <span style={{ color: "rgba(36, 36, 36, 0.4)" }}>
            当选择是时，允许考核部门自评分数
          </span>
        </Form.Item>
      </Form>
    </Modal>
  );
};
