import { Button, Form, FormInstance, Input, Radio, Select, Table } from "antd";
import { useCallback, useMemo, useRef, useState } from "react";
import { debounce } from "lodash";
import { DageTableActions } from "@dage/pc-components";
import { useNavigate } from "react-router-dom";

const DEFAULT_PARAMS = {
  pageNum: 1,
  pageSize: 20,
};

export default function CollectionPage() {
  const navigate = useNavigate();
  const formRef = useRef<FormInstance>(null);
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<[]>([]);
  const [params, setParams] = useState({
    ...DEFAULT_PARAMS,
  });
  const [total, setTotal] = useState(0);

  const COLUMNS = useMemo(() => {
    return [
      {
        title: "标题",
        dataIndex: "title",
      },
      {
        title: "年代",
        dataIndex: "nickName",
      },
      {
        title: "类别",
        dataIndex: "date",
      },
      {
        title: "级别",
        dataIndex: "date",
      },
      {
        title: "来源",
        dataIndex: "date",
      },
      {
        title: "封面",
        dataIndex: "date",
      },
      {
        title: "简介",
        dataIndex: "date",
      },
      {
        title: "发布日期",
        dataIndex: "date",
      },
      {
        title: "操作",
        render: (item: any) => {
          return <DageTableActions onEdit={() => {}} onDelete={() => {}} />;
        },
      },
    ];
  }, []);

  const handleReset = useCallback(() => {
    formRef.current?.resetFields();
  }, [formRef]);

  const debounceSearch = useMemo(
    () => debounce((changedVal: unknown, vals: any) => {}, 500),
    []
  );

  const paginationChange = useCallback(
    () => (pageNum: number, pageSize: number) => {
      setParams({ ...params, pageNum, pageSize });
    },
    [params]
  );

  return (
    <div className="information">
      <Form ref={formRef} layout="inline" onValuesChange={debounceSearch}>
        <Form.Item label="搜索项" name="stage">
          <Input placeholder="请输入" maxLength={10} showCount allowClear />
        </Form.Item>
        <Form.Item label="级别" name="type">
          <Select
            defaultValue="lucy"
            style={{ width: 220 }}
            options={[
              { value: "jack", label: "Jack" },
              { value: "lucy", label: "Lucy" },
              { value: "Yiminghe", label: "yiminghe" },
              { value: "disabled", label: "Disabled", disabled: true },
            ]}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={() => navigate("/collection/create")}>
            新增
          </Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>

      <Table
        loading={loading}
        className="page-table"
        dataSource={list}
        columns={COLUMNS}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
          position: ["bottomCenter"],
          showSizeChanger: true,
          current: params.pageNum,
          pageSize: params.pageSize,
          total,
          onChange: paginationChange(),
        }}
      />
    </div>
  );
}
