import { Button, message, Spin, Tooltip } from "antd";
import React, { useEffect, useState } from "react";
import { IColumn } from "../../../store/table";
import { Action } from "../../../types";
import { isMobile } from "../../../utils/helper";
import { DataArea, SelectWrapperGroup } from "../commonSelect";
import { Icon } from '../../../components/icons';
import { CalcField, DataAreaType } from "../DataStatic";
import { Button as AmisButton } from '../../../components';
import Dialog from "../../../components/DragModal";
import { getChartSchema } from "./chartTools";
import { isNil } from "lodash";
export const ICONTYPELIST = [
  { icon: '#icon-toolcolumn', title: '柱状图', value: 'bar' },
  { icon: '#icon-toolArea', title: '面积图', value: 'area' },
  { icon: '#icon-toolline', title: '折线图', value: 'line' },
  { icon: '#icon-toolBar', title: '条状图', value: 'bar-vertical' },
  { icon: '#icon-toolFix', title: '柱线结合图', value: 'line-bar' },
  { icon: '#icon-toolpie', title: '饼图', value: 'pie' },
  { icon: '#icon-toolring', title: '环形图', value: 'ring' },
  { icon: '#icon-toolFunnel', title: '漏斗图', value: 'funnel' },
  { icon: '#icon-toolSatter', title: '散点图', value: 'scatter' },
  { icon: '#icon-toolBobble', title: '气泡图', value: 'scatter-size' },
  // { icon: 'icon-zhexiantu', title: '雷达图', value: 'radar' },
  // { icon: 'icon-zhexiantu', title: '词云图', value: 'wordCloud' },
];
//图形分组，交互一致的一组
const lineGroup = ['line', 'bar', 'area', 'bar-vertical', 'line-bar'];
const pieGroup = ['pie', 'ring', 'funnel'];
interface IProps {
  action: Action;
  columns: IColumn[];
  data: {
    items: any[];//当前页数据
    selectedItems: any[];//选中数据
    itemRaws: any[]//前端分页时全部数据
  },
  container: HTMLDivElement | null;
  loadDataOnce?: boolean;
  getAllData: () => Promise<any>;
  crudTitle: string;
  name: string;
  handleDealData: (toolType: string, label: string, schema: any, subTitle?: string) => void;
  primaryField?: string;
}
const DataCharts = (props: IProps) => {
  const { action, columns, data, handleDealData, primaryField, crudTitle, name, loadDataOnce, getAllData } = props;
  const [visible, setVisible] = useState(false);
  const [selectedXAxisData, setSelectedXAxisData] = useState<string | string[]>('');
  const [selectedYAxisData, setSelectedYAxisData] = useState<string[]>([]);
  const [xAxisData, setXAxisData] = useState<CalcField[]>([]);
  const [yAxisData, setYAxisData] = useState<CalcField[]>([]);
  const [dataArea, setDataArea] = useState<DataAreaType>('present');
  const [chartType, setChartType] = useState('');
  const [barValue, setBarValue] = useState<string[]>([]);
  const [lineValue, setLineValue] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);

  // 初始化获取横纵可选项
  useEffect(() => {
    initXAndYList()
  }, [columns])

  // useEffect(() => {
  //   if(visible) {
  //     handleDefaultValue()
  //   } else {
  //     init()
  //   }
  // }, [visible])

  const onChartTypeChange = (type: string) => {
    //不是同组内切换就清空XY轴
    if(!(lineGroup.includes(type) && lineGroup.includes(chartType) || pieGroup.includes(type) && pieGroup.includes(chartType))) {
      setSelectedYAxisData([])
      setSelectedXAxisData('')
      setXAxisData(xAxisData.map(item => ({...item, disabled: false})))
      setYAxisData(yAxisData.map(item => ({...item, disabled: false})))
    }
    setChartType(type)
    //只有柱线结合图有这个
    if(lineValue.length || barValue.length) {
      setLineValue([])
      setBarValue([])
    }
    //柱线图内切换到柱线结合时，初始化柱和线的图形
    if(lineGroup.includes(chartType) && type === 'line-bar' && selectedYAxisData?.length) {
      setBarValue([...selectedYAxisData])
    }
  }

  const initXAndYList = () => {
    //10,11,14,15,字符串，数字，多行文本，富文本
    // let dataTypeArr = ['plain', 'text', 'static-text', 'input-text', 'number', 'static-number', 'input-number', 'textarea', 'html', 'static-html', 'input-rich-text'];
    let xAxisData: CalcField[] = [];
    let yAxisData: CalcField[] = [];
    columns.forEach(col => {
        let obj = {
            title: col.label,
            value: col.name || ''
        }
        if (['number', 'statc-number', 'input-number'].includes(col.type)) {
            yAxisData.push(obj)
        }
        xAxisData.push(obj);
    });
    setXAxisData(xAxisData)
    setYAxisData(yAxisData)
  }

  const handleAction = () => {
    setVisible(true)
  }

  const handleOk = async () => {
    let param = {
      dataArea,
      chartType,
      selectedXAxisData,
      selectedYAxisData
    }
    if (!param.dataArea) {
        return message.info({
            content: '请选择范围'
        });
    }
    if(param.dataArea === 'some' && (!data.selectedItems || !data.selectedItems.length)) {
      return message.info({
        content: '选中数据为空'
      });
    }
    if(param.dataArea === 'present' && (!data.items || !data.items.length)) {
      return message.info({
        content: '当前页数据为空'
      });
    }
    if (!param.chartType) {
        return message.info({
            content: '图形类型不能为空'
        });
    } else if (!param.selectedXAxisData || (Array.isArray(param.selectedXAxisData) && param.selectedXAxisData.length === 0)) {
      return message.info({
        content: '横坐标不能为空'
      });
    } else if (!param.selectedYAxisData.length && chartType !== 'scatter') {
        return message.info({
            content: '纵坐标不能为空'
        });
    }
    if(Array.isArray(param.selectedXAxisData) && chartType !== 'scatter-size'){
      const isRepeat = param.selectedXAxisData.some(item => param.selectedYAxisData.includes(item))
      if(isRepeat) return message.info({
        content: '横坐标不能和纵坐标相同'
      });
    }
    if (typeof param.selectedXAxisData === 'string' && param.selectedYAxisData.includes(param.selectedXAxisData)) {
      return message.info({
        content: '横坐标不能和纵坐标相同'
      });
    }
    let calcData = param.dataArea === 'all' ? (loadDataOnce ? data.itemRaws : []) 
      : (param.dataArea === 'some' ? data.selectedItems : data.items);
    if (param.dataArea === 'all') {
      if(loadDataOnce && (!data.itemRaws || !data.itemRaws.length)) {
        return message.warn({
          content: '当前数据为空'
        });
      }
      if(!loadDataOnce) {
        setLoading(true)
        const res = await getAllData();
        setLoading(false)
        if(!res || !res.items || !res.items.length) {
          return message.warn({
            content: '当前数据为空'
          });
        }
        calcData = res.items;
      }
    }
    const chartName = ICONTYPELIST.find(item => item.value === chartType)?.title
    const shcema = getChartSchema({
      type: param.chartType, 
      selectedXAxisData: param.selectedXAxisData, 
      selectedYAxisData: param.selectedYAxisData, 
      data: calcData,
      columns, 
      primaryField: primaryField ?? '', 
      barValue,
      chartTitle: crudTitle + '-' + chartName
    })
    handleDealData('data-chart', '图表', shcema, chartName)
    setVisible(false)
  }

  const handleDefaultValue = () => {
    const defaultValueStr = localStorage.getItem('chart-' + name)
    if (!isNil(defaultValueStr)) {
      const defaultValues = JSON.parse(defaultValueStr)
      setChartType(defaultValues.chartType)
      setSelectedXAxisData(defaultValues.selectedXAxisData)
      setSelectedYAxisData(defaultValues.selectedYAxisData)
      setDataArea(defaultValues.dataArea)
      setBarValue(barValue)
      setLineValue(lineValue)
    } else {
      init()
    }
  }

  const setDefault = () => {
    const param = { chartType, selectedXAxisData, selectedYAxisData, dataArea, barValue, lineValue }
    localStorage.setItem('chart-' + name, JSON.stringify(param))
    message.success('设置成功！')
  }

  const onReset = () => {
    if (localStorage.getItem('chart-' + name)) {
      handleDefaultValue()
    } else {
      init()
    }
  }

  const init = () => {
    setChartType('')
    setSelectedXAxisData('')
    setSelectedYAxisData([])
    setLineValue([])
    setBarValue([])
    setDataArea('present')
  }

  const renderButton = () => {
    return <AmisButton onClick={handleAction}>
      <Icon icon={action?.icon ?? "#icon-tooltool_autowidth"} className="icon" symbol />
      {action?.label}
    </AmisButton>
  }

  const renderBody = () => {
    return <div>
        <div style={{ display: 'flex' }}>
            <div className='chart-type-icon-group'>
                {
                    ICONTYPELIST.map(icon => (
                        <div
                            className={chartType === icon.value ? 'chart-type-icon-box chart-type-active' : 'chart-type-icon-box'}
                            key={icon.value}
                            onClick={() => onChartTypeChange(icon.value)}
                        >
                          <Tooltip title={icon.title} placement="top">
                            <Icon icon={icon.icon} fontSize={40} className="icon" />
                          </Tooltip>
                        </div>
                    ))
                }
            </div>
        </div>
        <div className={`select-wrapper-group-container ${['scatter'].includes(chartType) ? 'single-mode' : ''}`}>
            <SelectWrapperGroup
                label="坐标轴字段"
                type={chartType.includes('scatter') ? 'multiple' : 'single'}
                data={['scatter', 'scatter-size'].includes(chartType) ? yAxisData : xAxisData}
                onChange={(value) => {
                  if(chartType.includes('scatter')) {
                    if(Array.isArray(value) && value.length > 2) {
                      message.warn('当前图形只能选择两项作为轴字段')
                    } else {
                      setSelectedXAxisData(value)
                    }
                  } else {
                    setSelectedXAxisData(value[0])
                    setYAxisData(yAxisData.map(item => ({...item, disabled: item.value === value[0]})))
                  }
                }}
                defaultValue={Array.isArray(selectedXAxisData) ? selectedXAxisData : [selectedXAxisData]}
                hideToolbar={['scatter', 'scatter-size'].includes(chartType)}
            />
            {chartType !== 'scatter' && <SelectWrapperGroup
                label="值字段"
                data={yAxisData}
                defaultValue={selectedYAxisData}
                isCombine={['line-bar'].includes(chartType)}
                barValue={barValue}
                lineValue={lineValue}
                setBarValue={value => setBarValue(value)}
                setLineValue={value => setLineValue(value)}
                onChange={(value) => {
                    if(['scatter-size', 'pie', 'ring', 'funnel'].includes(chartType)) {
                      const selValue = value.pop()
                      setSelectedYAxisData(selValue ? [selValue] : [])
                      if(['pie', 'ring', 'funnel'].includes(chartType)) {
                        setXAxisData(xAxisData.map(item => ({...item, disabled: item.value === selValue})))
                      }
                    } else {
                      setSelectedYAxisData(value)
                      setXAxisData(xAxisData.map(item => {
                        if(value.includes(item.value)) {
                          return {...item, disabled: true}
                        }
                        return {...item, disabled: false}
                      }))
                    }
                }}
                hideToolbar={['scatter', 'scatter-size', 'pie', 'ring', 'funnel'].includes(chartType)}
            />}
        </div>
        <DataArea
            value={dataArea}
            className="static-data-area"
            onChange={(e) => setDataArea(e.target.value)}
        />
    </div>
  }

  const renderFooter = () => {
    return <div className="statics-footer">
      <div>
        <Button disabled={loading} className="tools-set-default" onClick={setDefault}>设置默认值</Button>
        <Button disabled={loading} className="tools-reset-default" onClick={onReset}>重置</Button>
      </div>
      <div>
        <Button disabled={loading} onClick={() => setVisible(false)}>取消</Button>
        <Button disabled={loading} type="primary" onClick={handleOk}>确认</Button>
      </div>
    </div>
  }

  return <>
    {renderButton()}
    {!isMobile() && visible && <Dialog getContainer={props.container || document.body}
      zIndex={1000} dialogVisible={visible} title='图表' width={540} destroyOnClose centered drag
      footer={renderFooter()}
      className={'statics-modal'}
      onCancel={() => setVisible(false)}
    >
      <Spin spinning={loading}>{renderBody()}</Spin>
    </Dialog>
    }
  </>
}
export default DataCharts;