import { Checkbox, Col, message, Radio, Row } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { CountItem } from "..";
import { buildCrossColumn, buildCrossColumn1, ICross, ICrossColumn } from "../cross";
import { CrossData, FieldType } from "../DataCross";
import { flatMap } from 'lodash';
interface IProps {
  columns: any[];
  calcNum: number;
  defaultNum: number;
  resetNum: number;
  name: string;
  setLoading: (val: boolean) => void;
  getAllData: () => Promise<any>;
  staticRecords: (port: 141 | 142 | 143) => void;
  handleChange: (newSchema: any) => void;
  data: {
    items: any[];//当前页数据
    selectedItems: any[];//选中数据
    itemRaws: any[]//前端分页时全部数据
  };
  initValues: {[key: string]: any};
}
export default (props: IProps) => {
  const {columns, getAllData, data, staticRecords, initValues, calcNum, defaultNum, resetNum, name, handleChange,
    setLoading} = props;
  const [rowFields, setRowFields] = useState<FieldType[]>(initValues.rowFields)
  const [colFields, setColFields] = useState<FieldType[]>(initValues.colFields)
  const [valueFields, setValueFields] = useState<FieldType[]>(initValues.valueFields)
  const [dataRange, setDataRange] = useState<0 | 1 | 2>(initValues.dataRange)
  const [countSum, setCountSum] = useState(initValues.countSum)
  const [valuePosition, setValuePosition] = useState<'row' | 'col'>(initValues.valuePosition)
useEffect(() => {
  console.log(rowFields)
}, [rowFields])
  useEffect(() => {
    calcNum > 0 && handleOk()
  }, [calcNum])
  useEffect(() => {
    defaultNum > 0 && handleDefault()
  }, [defaultNum])
  useEffect(() => {
    onChange({ rowFields, colFields, valueFields, dataRange, countSum, valuePosition })
  }, [rowFields, colFields, valueFields, dataRange, countSum, valuePosition])

  const onChange = (data: CrossData) => {
    crossDataRef.current = data
  }

  const handleChangeData = (type: 0 | 1 | 2, items: { name: string, checked: boolean }[]) => {
    const checkFn = (datas: FieldType[]) => {
      return datas.map(data => {
        const target = items.find(item => item.name == data.name)
        return target ? { ...data, checked: target.checked } : data
      })
    }
    const hideFn = (datas: FieldType[]) => {
      return datas.map(data => {
        const target = items.find(item => item.name == data.name)
        return target ? { ...data, hidden: target.checked } : data
      })
    }
    if (type == 0) {
      setRowFields(checkFn)
      setColFields(hideFn)
      setValueFields(hideFn)
    } else if (type == 1) {
      setColFields(checkFn)
      setRowFields(hideFn)
      setValueFields(hideFn)
    } else if (type == 2) {
      setValueFields(checkFn)
      setRowFields(hideFn)
      setColFields(hideFn)
    }
  }
  const getData = async (dataRange: 0 | 1 | 2) => {
    if (dataRange == 0) {
      return Promise.resolve(data.items)
    } else if (dataRange == 1) {
      return Promise.resolve(data.selectedItems)
    } else {
      const { items } = await getAllData()
      if (Array.isArray(items)) {
        return items
      }
      return []
    }
  }

  const crossDataRef = useRef<CrossData>()

  const handleOk = async () => {
    if (crossDataRef.current) {
      const rowFields = crossDataRef.current.rowFields.filter(field => !field.hidden && field.checked)
      const colFields = crossDataRef.current.colFields.filter(field => !field.hidden && field.checked)
      const valueFields = crossDataRef.current.valueFields.filter(field => !field.hidden && field.checked)
      if (valueFields.length == 0) {
        message.warning('请选择值')
        return
      }
      const dataRange = crossDataRef.current.dataRange
      const countSum = crossDataRef.current.countSum
      const valueInCol = crossDataRef.current.valuePosition == 'col'
      setLoading(true)
      const [crossColumns, datas] = await getData(dataRange).then<[ICrossColumn[], any[]]>(async datas => {
        if (datas.length > 10000) {
          message.warning('数据行数大于10000条，请重新选择')
          return [[], []]
        }
        const crossColumns = valueInCol ? buildCrossColumn1(rowFields, colFields, datas) : buildCrossColumn(rowFields, colFields, valueFields, datas, countSum)
        if (crossColumns.length > 1000) {
          message.warning('交叉制表结果列数大于1000，请重新选择')
          return [[], []]
        }
        return [crossColumns, datas]
      }).catch<[ICrossColumn[], any[]]>(() => [[], []]).finally(() => { 
        setLoading(false) 
      })

      if (crossColumns.length > 0) {
        localStorage.setItem('Debug_rowFields', JSON.stringify(rowFields.map(field => ({ label: field.label, name: field.name }))))
        localStorage.setItem('Debug_rawColumns', JSON.stringify(columns.map(column => ({ label: column.label, name: column.name }))))
        localStorage.setItem('Debug_retColumns', JSON.stringify(crossColumns.map(column => ({ label: column.label, name: column.name }))))

        const cross: ICross = {
          columnFields: colFields.map(field => ({ name: field.name })),
          rowFields: rowFields.map(field => ({ name: field.name })),
          valueFields: valueFields.map(field => field.name).join(','),
          positionType: valueInCol ? 1 : 0
        }
        const countColumns: CountItem[] = countSum ? valueFields.map(field => ({ name: field.name, label: field.label, formula: 'SUM', type: 'formula', rule: '合计' })) : []
        handleChange({cross, crossColumns, datas, countColumns})
        staticRecords(141)
      }
    }
  }

  const handleDefault = () => {
    if (crossDataRef.current && name) {
      const rowFields = flatMap(crossDataRef.current.rowFields ?? [], field => !field.hidden && field.checked ? field.name : [])
      const colFields = flatMap(crossDataRef.current.colFields ?? [], field => !field.hidden && field.checked ? field.name : [])
      const valueFields = flatMap(crossDataRef.current.valueFields ?? [], field => !field.hidden && field.checked ? field.name : [])
      const value = JSON.stringify({ ...crossDataRef.current, rowFields, colFields, valueFields })
      localStorage.setItem(`cross_${name}`, value)
      message.success('保存成功')
    }
  }
  const renderItem = (type: 0 | 1 | 2, datas: FieldType[]) => {
    return (
      <div className="common-select-container" style={{ height: '100%', width: 'calc(33% - 8px)' }}>
        <div className="sel-top">
          <span>{type == 0 ? '行' : type == 1 ? '列' : '值'}</span>
          <div className='sel-btn-group'>
            <span className="btn" onClick={() => handleChangeData(type, datas.filter(data => !data.hidden).map(data => ({ name: data.name, checked: true })))}>全选</span>
            <span className="btn" onClick={() => handleChangeData(type, datas.filter(data => !data.hidden).map(data => ({ name: data.name, checked: !data.checked })))}>反选</span>
            <span className="btn" onClick={() => handleChangeData(type, datas.filter(data => !data.hidden).map(data => ({ name: data.name, checked: false })))}>不选</span>
          </div>
        </div>
        <div className="sel-body" style={{ height: 420, overflow: 'auto' }}>
          {datas.map((item) => (
            !item.hidden &&<div key={item.name} className="checkbox-container">
              <Checkbox key={item.name} checked={item.checked} onChange={e => handleChangeData(type, [{ name: item.name, checked: e.target.checked }])}>{item.label}</Checkbox>
            </div>
          ))}
        </div>
      </div>
    )
  }
  const renderBody = () => {
    return <div>
      <div className="select-wrapper-group-container" >
        {renderItem(0, rowFields)}
        {renderItem(1, colFields)}
        {renderItem(2, valueFields)}
      </div>
      <Row style={{ marginTop: 12 }}>
        <Col span={4} >
          <span>数据范围</span>
        </Col>
        <Col span={10}>
          <Radio.Group onChange={e => setDataRange(e.target.value)} value={dataRange}>
            <Radio value={0}>当前页</Radio>
            <Radio value={1}>选中</Radio>
            <Radio value={2}>全部</Radio>
          </Radio.Group>
        </Col>
        <Col span={3}>
          <Checkbox checked={valuePosition == 'col'} onChange={e => setValuePosition(e.target.checked ? 'col' : 'row')} >转置</Checkbox>
        </Col>
        <Col span={6}>
          <Checkbox checked={countSum} onChange={e => setCountSum(e.target.checked)} >生成合计值</Checkbox>
        </Col>
      </Row>
    </div>
  }
  return renderBody()
}