import {memo, useMemo, useRef, useState} from 'react';
import {RadioCheckButton} from './RadioCheckButton.jsx'
import {EditableTags} from './EditableTags'
import {Popconfirm, Space,Typography} from "antd";
import {ProForm, ProFormSelect, ProFormText} from "@ant-design/pro-components";
import {TIME_COND, WHERE_COND} from "../pages/IndexDefine/constants";
import {DISPLAY_COND} from "../pages/MainPage/constants";
let timer;
const { Text } = Typography;
export const FilterPanel=memo(({
   options,
   viewer,
   onChange,
   extra,
   delay=0
})=>{
  console.log(options)
  const [tags,setTags] = useState([]);
  const dataRef = useRef({tags});
  const formRef = useRef();

  const callDelay = (time)=>{
    // 清除之前设置的计时器
    clearTimeout(timer);
    timer = setTimeout(() => {
      onChange && onChange(dataRef.current)
    }, time);
  }

  const onSelectTime=(time)=>{
    dataRef.current.days=time
    callDelay(delay)
  }

  const onSelectDimension=(index,map)=>{
    dataRef.current.dimension=map
    callDelay(delay)
  }

  const onSelectMetric=(index,map)=>{
    dataRef.current.metric=map
    callDelay(delay)
  }

  const onFilterClose=(tags)=>{
    dataRef.current.tags = tags
    setTags(tags)
    callDelay(delay)
  }

  const onAddFilter = (form)=> {
    const {dimension, condition, keyword} = form;
    const dimensionObj = JSON.parse(dimension);
    setTags(pre => {
      const news = pre.concat({
        id: Math.random(),
        ...form,
        value:dimensionObj.value,
        bizName:dimensionObj.bizName,
        name:dimensionObj.label,
        label: (
          <Space size="middle">
            <Text strong>{`“${dimensionObj.label}”`}</Text>
            <Text type="success">{condition}</Text>
            <Text strong>{`“${keyword}”`}</Text>
          </Space>
        )
      })
      dataRef.current.tags=news
      return news
    })

    callDelay(0)
  }

  const onDisplayChange = (display)=>{
    dataRef.current.display=display
    callDelay(delay)
  }

  const FilterForm = useMemo(() =>
      <ProForm
        formRef={formRef}
        style={{width:500}}
        labelCol={{span:6}}
        wrapperCol={{span:16}}
        layout='horizontal'
        submitter={false}
        onFinish={onAddFilter}
      >
        <ProFormSelect
          label="维度"
          name="dimension"
          placeholder="请选择连接类型"
          rules={[{ required: true }]}
          options={
            (options.dimension||[]).map(item=>({
              label: item.label,
              value: JSON.stringify(item)
            }))
          }
        />
        <ProFormSelect
          label="条件类型"
          name="condition"
          placeholder="请选择连接类型"
          rules={[{ required: true }]}
          options={WHERE_COND}
        />
        <ProFormText
          name="keyword"
          label="过滤值"
          rules={[{ required: true }]}
        />
      </ProForm>
    ,[options]
  )

  return (
    <>
      <RadioCheckButton title="日期范围" options={TIME_COND} onSelect={onSelectTime}/>
      {options?.metric && <RadioCheckButton title="分析指标" options={options.metric} mode="checkBox" onChange={onSelectMetric}/>}
      {options?.dimension && <RadioCheckButton title="分析维度" options={options.dimension} mode="checkBox" onChange={onSelectDimension}/>}
      <Popconfirm
        icon={false}
        placement="bottomLeft"
        title="新增筛选值"
        description={FilterForm}
        onConfirm={() => formRef.current?.submit()}
        okText="确定"
        cancelText="取消"
        arrow={false}
      >
        <RadioCheckButton title="筛选值" link="筛选条件设置" />
      </Popconfirm>
      <EditableTags options={tags} onClose={onFilterClose} closable={true}/>
      <RadioCheckButton title="展示方式" options={DISPLAY_COND} onSelect={onDisplayChange}/>
      {extra}
      {viewer}
    </>
  );
})
