import {useAppDispatch, useAppSelector} from "../../../redux/configureStore";
import {useCallback, useMemo, useRef, useState} from "react";
import { PlusOutlined } from '@ant-design/icons';
import {ProTable,ProCard} from '@ant-design/pro-components';
import {Button} from 'antd';

import {deleteDimensions, getDimensions, getModals} from "../MainPage/slice/thunks";
import {columnsFactory} from "../../../utils/columnsFactory";
import {ProTableDefault, STATUS_TYPE} from "../../constants";
import {CheckCardList} from "../../components/CheckCardList";
import {selectDimensions, selectModals} from "../MainPage/slice/selectors";
import useMount from "../../hooks/useMount";

const baseColumns = [
  {
    title: '模型',
    dataIndex: 'modelName',
  },
  {
    title: '维度名称',
    dataIndex: 'name',
  },
  {
    title: '描述',
    dataIndex: 'description',
  },
  {
    title: '业务名称',
    dataIndex: 'bizName',
  },
  {
    title: '状态',
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: STATUS_TYPE,
  }
];

export const DimensionManage = () => {
  const dispatch = useAppDispatch();
  const [columns, setColumns] = useState([]);
  const dataRef = useRef({modalId:0});
  const modals = useAppSelector(selectModals);
  const dimensions = useAppSelector(selectDimensions);
  /** 初始渲染的钩子 */
  useMount(
    ()=>{
      // 获取模型
      dispatch(getModals(10))

      // 格式化表头
      setColumns(
        columnsFactory({
          dataSource: baseColumns,
          onEdit:handleEdit,
          onDelete:({id},reload)=>{
            dispatch(deleteDimensions({
              id,
              resolve(){
                reload()
              }
            }))
          }
        })
      )
    },
    ()=>{}
  )
  /** 打开 新增、编辑 对话框 */
  const handleEdit=(row)=>{};

  /** 提交表单 */
  const onSubmit = useCallback((values)=> {},[]);

  /** 模型列表 */
  const cardList = useMemo(
    ()=> modals.map(({value,name})=>({value,title:name})),[modals]
  );

  /** 选中数据集卡片时取数据 */
  const onCardSelect = useCallback((value)=>{
    if (value){
      dataRef.current.modalId = value
      dispatch(getDimensions({id:value}))
    }
  },[])

  return (
    <>
      <ProCard gutter={8} ghost>
        <ProCard
          bordered
          headerBordered
          colSpan="20%"
          title="模型列表"
          style={{height:'84vh'}}
        >
          <CheckCardList options={cardList} onSelect={onCardSelect}/>
        </ProCard>
        <ProCard bordered={false} bodyStyle={{padding: 0}}>
          <ProTable
            {...ProTableDefault}
            headerTitle="维度列表"
            columns={columns}
            dataSource={dimensions}
            request={async () => {
              if (dataRef.current?.modalId){
                await dispatch(getDimensions({id:dataRef.current.modalId}))
              }
            }}
            pagination={{
              pageSize: 20,
              onChange: (page) => console.log(page),
            }}
            toolBarRender={() => [
              <Button
                key="button"
                icon={<PlusOutlined/>}
                onClick={() => handleEdit()}
                type="primary"
              >
                新建
              </Button>
            ]}
          />
        </ProCard>
      </ProCard>
    </>
  );
}