import { Button, Form, Input, Table, Tag } from "antd";
import { useForm } from "antd/es/form/Form";
import Column from "antd/es/table/Column";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import axiosInstance from "../../api/axios";
import { selectUserId } from "../../features/auth/authSlice";

export default function MyApproval() {
  const [approvals, setApprovals] = useState([]);
  const [form] = useForm();
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  const userId = useSelector(selectUserId);

  const fetchData = async (pagination, searchParam) => {
    const data = await axiosInstance.get(`/approval/${userId}`, {
      params: {
        page: pagination.current,
        size: pagination.pageSize,
        applicantName: searchParam?.applicantName,
        deviceName: searchParam?.deviceName,
      },
    });

    setApprovals(data.records);
    setPagination({
      ...pagination,
      total: data.total,
    });
  };

  useEffect(() => {
    fetchData(pagination);
  }, []);

  const handlePageChange = async (pagination) => {
    const values = await form.validateFields();
    fetchData(pagination, values);
  };

  const handleSearch = async () => {
    const values = await form.validateFields();
    const newPagination = {
      ...pagination,
      current: 1,
    };
    setPagination(newPagination);
    await fetchData(newPagination, values);
  };

  return (
    <div className="p-2 pt-4">
      <Form form={form} layout="inline" onFinish={handleSearch}>
        <Form.Item name="applicantName">
          <Input placeholder="请输入预约人姓名" allowClear />
        </Form.Item>
        <Form.Item name="deviceName">
          <Input placeholder="请输入设备名称" allowClear />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table
        dataSource={approvals}
        pagination={pagination}
        onChange={handlePageChange}
        className="mt-4"
        rowKey="approvalId"
      >
        <Column title="预约人" key="applicantName" dataIndex="applicantName" />
        <Column
          title="所属团队"
          key="applicantTeam"
          dataIndex="applicantTeam"
        />
        <Column
          title="联系方式"
          key="applicantContact"
          dataIndex="applicantContact"
        />
        <Column title="预约设备" key="deviceName" dataIndex="deviceName" />
        <Column title="开始时间" key="startTime" dataIndex="startTime" />
        <Column title="结束时间" key="endTime" dataIndex="endTime" />
        <Column
          title="审批情况"
          key="decision"
          render={(_, { decision, status }) => {
            if (decision === 1) {
              if (status === "APPROVED_ASSIST") {
                return (
                  <Tag color="blue" key="decision">
                    通过，需要协助
                  </Tag>
                );
              } else {
                return (
                  <Tag color="green" key="decision">
                    通过
                  </Tag>
                );
              }
            }
            if (decision === 0) {
              return (
                <Tag color="red" key="decision">
                  拒绝
                </Tag>
              );
            }
            return (
              <Tag color="grey" key="decision">
                ERROR
              </Tag>
            );
          }}
        />
      </Table>
    </div>
  );
}