import React, { useMemo } from 'react'
import { Scrollbars } from 'react-custom-scrollbars'
import { Empty, Radio } from 'antd'
import { IFComponent, LayoutCard } from '@woowalker/feui'
import FakeBoard from '../components/FakeBoard'
import CommonChart from '../../Chart/CommonChart'
import TableChart from '../../Chart/TableChart'
import { getPieChartOption } from '../../Chart/PieChart'
import WithDragDropContext from '../../common/WithDragDropContext'
import { DragDropCard } from '../../../utils/withDragDropContext'
import { useWindowSize } from '../../../utils/hooks'
import classNames from 'classnames'
import './chartBoard.less'

function ChartBoard (props) {
  const checkPieChartOption = (chartData) => {
    if (chartData.Data?.[0]?.Type === 'pie') {
      return getPieChartOption({
        // echarts option配置
        title: chartData.Data[0]?.Name || '饼图',
        xAxis: chartData.XAxis.map(item => ({ data: item.Data || [] })),
        // 自定义数据存储
        data: chartData.Data.map(item => {
          return {
            yAxisIndex: item.YAxisIndex,
            data: (item.Data || []).map(subData => {
              return {
                value: subData.Value,
                // 用作 pie -> series -> label.rich 富文本样式的配置
                data: {
                  head: subData.Heads,
                  data: subData.Data
                }
              }
            })
          }
        })
      })
    }
    return false
  }

  /** 小屏图表占据全部中间区域 */
  const winSize = useWindowSize()
  const flexChartStyle = useMemo(() => {
    return winSize.width <= 1600 ? { width: '100%' } : {}
  }, [winSize])

  const { onEdit, ChartData, moveRow, handleCheckedChange, handleRadioChange, style } = props
  const WrapComponent = onEdit ? DragDropCard : React.Fragment

  return (
    <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
      <WithDragDropContext>
        {
          ChartData.map((item, index) => {
            if (!onEdit && (!item.Data || !item.Data.length)) return <div />
            
            const wrapProps = onEdit ? { index, moveRow: (dragIndex, hoverIndex) => moveRow(dragIndex, hoverIndex, 'ChartData') } : {}
            const checkedChart = item.checkedChart || (item.Data ? item.Data[0].Data : {})
            const commonChartData = {
              xAxis: checkedChart.XAxis ? checkedChart.XAxis[0].Data : [],
              yAxis: checkedChart.YAxis || [],
              data: checkedChart.Data || []
            }
            const pieChartOption = checkPieChartOption(checkedChart)
            const radioShow = !!(item.Data && item.Data.length > 1)

            return (
              <WrapComponent key={`${item.Code}-${index}`} {...wrapProps}>
                {/** Dragable 要求第一个 children 必须为纯标签 */}
                <div className='chart-board' style={{ ...flexChartStyle, ...style }}>
                  <LayoutCard
                    checkable={onEdit}
                    checked={item.IsCheck}
                    onCheckedChange={checked => handleCheckedChange(checked, item)}
                    title={item.Name}
                    className='chart-board__card'
                  >
                    <IFComponent
                      IF={!!item.Data}
                      ELSE={
                        <IFComponent IF={onEdit} ELSE={<Empty />}>
                          <FakeBoard />
                        </IFComponent>
                      }
                    >
                      <IFComponent IF={radioShow}>
                        <Radio.Group
                          size='small'
                          buttonStyle='solid'
                          defaultValue={item.Data ? item.Data[0].Name : ''}
                          onChange={evt => handleRadioChange(evt, item)}
                        >
                          {
                            item.Data?.map(({ Name }, index) => {
                              return <Radio.Button key={`${Name}_${index}`} value={Name}>{Name}</Radio.Button>
                            })
                          }
                        </Radio.Group>
                      </IFComponent>
                      <div className={classNames('chart-board__commonChart', { radioShow })}>
                        <IFComponent
                          IF={!pieChartOption}
                          ELSE={<TableChart type={2} option={pieChartOption} />}
                        >
                          <CommonChart {...commonChartData} />
                        </IFComponent>
                      </div>
                    </IFComponent>
                  </LayoutCard>
                </div>
              </WrapComponent>
            )
          })
        }
      </WithDragDropContext>
    </Scrollbars>
  )
}

export default ChartBoard