import {ProCard} from '@ant-design/pro-components';
import {CheckCardList} from '../../components/CheckCardList';
import {FilterPanel} from '../../components/FilterPanel';
import {Table} from 'antd';
import {useCallback, useEffect, useMemo, useState} from 'react';
import {useAppDispatch, useAppSelector} from "../../../redux/configureStore";
import {selectDataSet} from "../MainPage/slice/selectors";
import {getAllDataset, queryDataSet} from "../MainPage/slice/thunks";
import {TYPE_ENUM} from "../../constants";


export const DataSetPage =()=>{
  const dispatch = useAppDispatch();
  const dataset = useAppSelector(selectDataSet);
  const [record,setRecord]=useState({});
  const [queryData,setQueryData] = useState({});
  useEffect(() => {
    dispatch(getAllDataset({}))
  }, []);

  const cardList = useMemo(
    ()=>
      dataset && dataset.map(value=>({
        value,
        title: value.name,
      }))
    ,[dataset]
  );

  const onCardSelect = useCallback((value)=>{
    if (value){
      setRecord(value)
    }
  },[])

  /** 查询数据集结果 */
  const onFilterChange =useCallback((value)=>{
    console.log(value)
    const dimensionFilters = value.tags.map(tag => {
      const dimensionObj = JSON.parse(tag.dimension)
      return {
        id: tag.value,
        relation: "FILTER",
        bizName: dimensionObj.bizName,
        name: tag.bizName,
        operator: tag.condition,
        value: tag.keyword,
        children: []
      }
    })

    const params = {
      limit: 50,
      sql: "",
      queryType: "DETAIL",
      dataSetId: record.id,
      dataSetName: record.name,
      dateInfo: {
        dateMode: "BETWEEN",
        startDate: "2024-01-01",
        endDate: "2024-09-01",
        dateList: [],
        unit: 0,
        period: 'day',
        detectWord: "",
        isInherited: false,
        groupByDate: false
      },
      dimensionFilters,
      needAuth: false,
      groups: value.dimension.filter(item=>item.type===TYPE_ENUM.DIMENSION).map(item=>item.bizName),
      aggregators:value.dimension.filter(item=>item.type===TYPE_ENUM.METRIC).map(item=>({
        column: item.bizName,
        func: "SUM",
        nameCh: "",
        args: [],
        alias: item.label
      })),
      orders: [],
      params: [],
      cacheInfo: {
        cache: false
      },
      metricFilters: [],
    }
    console.log(params)
    dispatch(queryDataSet({
      params,
      resolve(data) {
        setQueryData(data)
      }
    }))
  },[record])

  const onSearch = useCallback((e)=>{
    console.log(e)
  },[])

  const options = useMemo(()=>{
    const {dimensionList,metricList}=record;
    const dimension = (dimensionList||[]).map(v=>({
      label:v.description||v.name,
      value:v.id,
      bizName:v.bizName,
      type:TYPE_ENUM.DIMENSION
    }))
    const metric = (metricList||[]).map(v=>({
      label:v.description||v.name,
      value:v.id,
      bizName:v.bizName,
      type:TYPE_ENUM.METRIC
    }))
    return {dimension,metric}
  },[record])

  return (
    <ProCard gutter={8} ghost >
      <ProCard bordered headerBordered colSpan="20%" title="数据集" style={{height:'84vh'}}>
        <CheckCardList
          options={cardList}
          onSelect={onCardSelect}
          onSearch={onSearch}
        />
      </ProCard>
      <ProCard bordered headerBordered title={record.name||'查询数据结果'} style={{height:'84vh'}}>
        <FilterPanel
          delay={1000}
          options={options}
          onChange={onFilterChange}
          viewer={
            <Table
              columns={
                (queryData?.columns||[]).map(item=>({
                  title: item.description||item.name,
                  dataIndex: item.nameEn,
                  key: item.nameEn,
                }))
              }
              dataSource={queryData?.resultList}
            />
          }
        />
      </ProCard>
    </ProCard>
  )
}
