import { useMemo, useState } from "react";
import { Button, Input, Table } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { PageContainer } from "@/components";
import style from "./index.module.scss";
import { TEMPLATE_TABS } from "./constants";

const { Search } = Input;

const TemplatePage = () => {
  const navigate = useNavigate();
  const [tab, setTab] = useState(TEMPLATE_TABS.GRADING);
  const isGrading = useMemo(() => tab === TEMPLATE_TABS.GRADING, [tab]);

  const handleTab = (type: TEMPLATE_TABS) => {
    setTab(type);
  };

  return (
    <PageContainer
      title="考核模板"
      headerSlot={
        <div className={style.pageTools}>
          <div>
            <Button
              type="primary"
              ghost={!isGrading}
              size="large"
              onClick={handleTab.bind(undefined, TEMPLATE_TABS.GRADING)}
            >
              定级评估模板 11
            </Button>
            <Button
              type="primary"
              ghost={isGrading}
              size="large"
              onClick={handleTab.bind(undefined, TEMPLATE_TABS.RUNNING)}
            >
              运行评估模板 0
            </Button>
          </div>

          <div className={style.pageToolsRight}>
            {isGrading ? (
              <>
                <label>搜索</label>
                <Search
                  size="large"
                  placeholder="请输入模板名称"
                  allowClear
                  style={{ width: 170 }}
                />
              </>
            ) : (
              ""
            )}

            <Button
              type="primary"
              icon={<PlusOutlined />}
              size="large"
              className={style.secondButton}
              onClick={() => navigate("/assessment/template/create")}
            >
              新增定级评估模板
            </Button>
          </div>
        </div>
      }
    >
      <Table
        className="cus-table large"
        columns={[
          {
            title: "名称",
            dataIndex: "name",
            key: "name",
            align: "center",
          },
          {
            title: "说明",
            dataIndex: "description",
            key: "description",
            align: "center",
          },
        ]}
      />
    </PageContainer>
  );
};

export default TemplatePage;