import React, { useState } from 'react'
import { IFComponent } from '@woowalker/feui'
import StatisticBoard from '../components/StatisticBoard'
import HMIBoard from '../components/HMIBoard'
import ChartBoard from '../components/ChartBoard'
import RankBoard from '../components/RankBoard'
import EmptyPage from '../components/EmptyPage'
import classNames from 'classnames'

function SmallChartBoard (props) {
  const [fullscreen, setFullscreen] = useState(false)

  const { onEdit, boardData, moveRow, handleCheckedChange, handleRadioChange } = props
  /** 加载中、无数据视图 */
  if (!boardData) return <EmptyPage onEdit={props.onEdit} />

  /** 数据加载完成视图 */
  const { StatisticsData, HmiData = [], ChartData = [], RankingData } = boardData
  const chartShow = !!ChartData.length
  return (
    <div className={classNames('small-board', { fullscreen })}>
      <div className='small-board__left'>
        <div className='small-board__left-top'>
          <StatisticBoard
            horizontal
            onEdit={onEdit}
            StatisticsData={StatisticsData}
            moveRow={moveRow}
            handleCheckedChange={handleCheckedChange}
            handleRadioChange={handleRadioChange}
            style={{ display: 'inline-block', width: 250 }}
          />
        </div>
        <div className='small-board__left-bottom'>
          <HMIBoard
            onEdit={onEdit}
            HmiData={HmiData}
            moveRow={moveRow}
            handleCheckedChange={handleCheckedChange}
            onFullscreen={setFullscreen}
          />
        </div>
      </div>
      <div className='small-board__right'>
        <IFComponent IF={chartShow}>
          <div className='small-board__right-top'>
            <ChartBoard
              onEdit={onEdit}
              ChartData={ChartData}
              moveRow={moveRow}
              handleCheckedChange={handleCheckedChange}
              handleRadioChange={handleRadioChange}
              style={{ width: '100%', height: '100%' }}
            />
          </div>
        </IFComponent>
        <div className={classNames('small-board__right-bottom', { 'full_height': !chartShow })}>
          <RankBoard
            onEdit={onEdit}
            RankingData={RankingData}
            moveRow={moveRow}
            handleCheckedChange={handleCheckedChange}
            style={{ height: !chartShow ? '33.33%' : '100%' }}
          />
        </div>
      </div>
    </div>
  )
}

export default SmallChartBoard
