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 HorizontalBoard (props) {
  const [fullscreen, setFullscreen] = useState(false)

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

  /** 数据加载完成视图 */
  const { StatisticsData, HmiData = [], ChartData, RankingData } = boardData
  const hmiShow = !!HmiData.length
  const chartStyle = hmiShow ? { width: '100%', height: '100%' } : { height: '100%' }

  return (
    <div className={classNames('horizontal-board', { fullscreen })}>
      <div className='horizontal-board__top'>
        <StatisticBoard
          horizontal
          onEdit={onEdit}
          StatisticsData={StatisticsData}
          moveRow={moveRow}
          handleCheckedChange={handleCheckedChange}
          handleRadioChange={handleRadioChange}
          style={{ display: 'inline-block', width: 250 }}
        />
      </div>
      <div className='horizontal-board__center'>
        <IFComponent IF={hmiShow}>
          <div className='horizontal-board__center-left'>
            <HMIBoard
              onEdit={onEdit}
              HmiData={HmiData}
              moveRow={moveRow}
              handleCheckedChange={handleCheckedChange}
              onFullscreen={setFullscreen}
            />
          </div>
        </IFComponent>
        <div className={classNames('horizontal-board__center-right', { 'full_width': !hmiShow })}>
          <ChartBoard
            onEdit={onEdit}
            ChartData={ChartData}
            moveRow={moveRow}
            handleCheckedChange={handleCheckedChange}
            handleRadioChange={handleRadioChange}
            style={chartStyle}
          />
        </div>
      </div>
      <div className='horizontal-board__bottom'>
        <RankBoard
          onEdit={onEdit}
          RankingData={RankingData}
          moveRow={moveRow}
          handleCheckedChange={handleCheckedChange}
          style={{ display: 'inline-block', width: 270, height: '100%' }}
        />
      </div>
    </div>
  )
}

export default HorizontalBoard
