import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { A2_APIgetList } from "@/store/action/A2integral";
import MyTable from "@/components/MyTable";
import { RootState } from "@/store";
import { A2tableC1, A2tableC2 } from "@/utils/tableData";
import { A2editInfoType, A2tableType } from "@/types";
import { Button } from "antd";
import A2edit from "./A2edit";

function A2integral() {
  const dispatch = useDispatch();

  const getListFu = useCallback(() => {
    dispatch(A2_APIgetList());
  }, [dispatch]);

  useEffect(() => {
    getListFu();
  }, [getListFu]);

  const tableInfo = useSelector(
    (state: RootState) => state.A2integral.tableInfo
  );

  const tableLastBtn = useCallback((type: "user" | "game") => {
    return [
      {
        title: "操作",
        render: (item: A2tableType) => (
          <Button
            size="small"
            type="text"
            onClick={() =>
              setEditInfo({
                id: item.id,
                type,
                name: item.name,
                day: item.day,
                score: item.score,
              })
            }
          >
            编辑
          </Button>
        ),
      },
    ];
  }, []);

  const [editInfo, setEditInfo] = useState({} as A2editInfoType);

  return (
    <div className={styles.A2integral}>
      <div className="pageTitle">积分管理</div>
      <div className="A2tit">用户活跃</div>
      <div className="A1tableBox">
        <MyTable
          list={tableInfo.list1}
          columnsTemp={A2tableC1}
          lastBtn={tableLastBtn("user")}
          pagingInfo={false}
        />
      </div>

      <div className="A2tit">爱心林场</div>
      <div className="A1tableBox">
        <MyTable
          list={tableInfo.list2}
          columnsTemp={A2tableC2}
          lastBtn={tableLastBtn("game")}
          pagingInfo={false}
          merge={{ type: "说明", num: tableInfo.list2.length, loc: "rowSpan" }}
        />
      </div>

      {editInfo.id ? (
        <A2edit
          editInfo={editInfo}
          closeFu={() => setEditInfo({} as A2editInfoType)}
          upTableFu={() => getListFu()}
        />
      ) : null}
    </div>
  );
}

const MemoA2integral = React.memo(A2integral);

export default MemoA2integral;
