import { FC, useEffect, useState } from "react";
import { Form, Input, Modal, ModalProps, Radio, Select } from "antd";
import { getManageUserListApi, saveManageRoleDeptApi } from "@/api";
import { IManageDeptItem, IManageUserItem } from "@/types";

export interface AddDeptModalProps extends Omit<ModalProps, "onOk"> {
  assessId: number | string;
  item?: null | IManageDeptItem;
  onCancel?: () => void;
  onOk?: () => void;
}

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

const { TextArea } = Input;

export const AddDeptModal: FC<AddDeptModalProps> = ({
  assessId,
  open,
  item,
  onOk,
  onCancel,
  ...rest
}) => {
  const [form] = Form.useForm<any>();
  const [loading, setLoading] = useState(false);
  const [userLoading, setUserLoading] = useState(false);
  const [userList, setUserList] = useState<IManageUserItem[]>([]);

  const getUserList = async () => {
    try {
      setUserLoading(true);
      const data = await getManageUserListApi();
      setUserList(data);
    } finally {
      setUserLoading(false);
    }
  };

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

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

  const handleSubmit = async (values: any) => {
    try {
      setLoading(true);
      await saveManageRoleDeptApi({
        ...values,
        assessId,
        crewUserIds: values.crewUserIds?.join(","),
        id: item?.id,
      });
      onOk?.();
      handleCancel();
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (open) {
      !userList.length && getUserList();

      if (item) {
        const crewUserIds = item.crewUserIds.split(",").map((i) => Number(i));
        form.setFieldsValue({
          ...item,
          crewUserIds,
        });
      }
    }
  }, [open, item, userList]);

  return (
    <Modal
      title={item ? "编辑角色" : "新增角色"}
      okText="提交"
      cancelText="取消"
      maskClosable={false}
      open={open}
      width={640}
      okButtonProps={{
        disabled: loading,
      }}
      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="levelMuseum"
          required
          rules={[{ required: true, message: "请选择博物馆级别" }]}
        >
          <Radio.Group
            options={MUSEUM_LEVEL_LIST}
            optionType="button"
            buttonStyle="solid"
          />
        </Form.Item>
        <Form.Item label="组别说明" name="remark">
          <TextArea
            rows={4}
            placeholder="请输入内容，最多200字"
            maxLength={200}
          />
        </Form.Item>
        <Form.Item
          label="部门主管"
          required
          name="leaderUserId"
          rules={[{ required: true, message: "请选择部门主管" }]}
        >
          <Select
            placeholder="请选择"
            loading={userLoading}
            options={userList}
            fieldNames={{ label: "realName", value: "id" }}
          />
        </Form.Item>
        <Form.Item label="部门成员" name="crewUserIds">
          <Select
            mode="multiple"
            placeholder="请选择"
            loading={userLoading}
            options={userList}
            fieldNames={{ label: "realName", value: "id" }}
          />
        </Form.Item>
        <Form.Item label="自评权限" required>
          <Form.Item noStyle name="isSelf" 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>
  );
};
