import {memo, useCallback, useEffect, useState} from 'react';
import {ProFormGroup, ProFormRadio, ProFormSelect,ProFormDigit} from "@ant-design/pro-components";
import {useAppDispatch, useAppSelector} from "../../../../redux/configureStore";
import {selectModals} from "../../MainPage/slice/selectors";
import {CALC_TYPE, DATA_TYPE, INVOKE_TYPE} from "../constants";
import {getModalDetail, getModalInfo} from "../../MainPage/slice/thunks";

export const AtomicIndexForm = memo(({modelId,onChange}) => {
  const dispatch = useAppDispatch();
  const modals = useAppSelector(selectModals);
  const [measureList,setMeasureList]=useState([]);
  const [dateDims,setDateDims]=useState([]);
  const [analyzeDims,setAnalyzeDims]=useState([]);

  useEffect(() => {
    const initialSelector = async (modelId)=>{
      await onModalSelect(modelId)
    }
    if (modelId){
      initialSelector(modelId)
    }
  }, [modelId]);

  const onModalSelect =useCallback(async (id)=>{
    let date = [];
    let analyze = [];
    let tempMeasures = []
    await dispatch(getModalInfo({
      id,
      resolve(data){
        const {dimensions} = data;
        dimensions && dimensions.forEach(
          ({name,bizName,description,type,id})=>{
            const obj = {
              label:(name==="id"?bizName:description) || name,
              value:id
            }
            if (type==="time") {
              date.push(obj)
            }else {
              analyze.push(obj)
            }
        })
      }
    }))
    await dispatch(getModalDetail({
      id,
      resolve(data){
        const {modelDetail} = data;
        if (modelDetail?.measures) {
          tempMeasures = modelDetail?.measures
        }
      }
    }))
    // 缓存度量列表
    setMeasureList(
      tempMeasures.map(
        item=>({
          label:item.alias||item.name,
          value:item.bizName
        })
      )
    )
    console.log(date)
    // 缓存维度列表
    setDateDims(date)
    setAnalyzeDims(analyze)
    onChange?.()
  },[])
  return (
    <>
      <ProFormSelect
        name="modelId"
        label="数据模型"
        rules={[{ required: true }]}
        options={modals}
        onChange={onModalSelect}
      />
      <ProFormSelect
        name="measure"
        label="度量"
        //rules={[{ required: true }]}
        options={measureList}
      />
      <ProFormSelect
        name="dateDimension"
        label="时间维度"
        rules={[{ required: true }]}
        options={dateDims}
      />
      <ProFormSelect
        name="relateDimension"
        options={analyzeDims}
        label="分析维度"
        fieldProps={{
          mode: 'multiple'
        }}
      />
      <ProFormSelect
        name="operations"
        label="计算方式"
        valueEnum={CALC_TYPE}
      />
      <ProFormGroup style={{marginLeft:105}}>
        <ProFormSelect
          name="dataFormatType"
          label="数据格式"
          valueEnum={DATA_TYPE}
          width={480}
        />
        <ProFormDigit name="decimalPlaces" placeholder="保留小数点位数" min={1} max={10} />
      </ProFormGroup>
      <ProFormRadio.Group
        name="inovkeMethod"
        label="调度方式"
        valueEnum={INVOKE_TYPE}
      />
    </>
  )
})
