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 HomeBoard (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 ? { height: '100%' } : {}

  return (
    <div className={classNames('home-board', { fullscreen })}>
      <div className='home-board__left'>
        <StatisticBoard
          onEdit={onEdit}
          StatisticsData={StatisticsData}
          moveRow={moveRow}
          handleCheckedChange={handleCheckedChange}
          handleRadioChange={handleRadioChange}
        />
      </div>
      <div className='home-board__center'>
        <IFComponent IF={hmiShow}>
          <div className='home-board__center-top'>
            <HMIBoard
              onEdit={onEdit}
              HmiData={HmiData}
              moveRow={moveRow}
              handleCheckedChange={handleCheckedChange}
              onFullscreen={setFullscreen}
            />
          </div>
        </IFComponent>
        <div className={classNames('home-board__center-bottom', { 'full_height': !hmiShow })}>
          <ChartBoard
            onEdit={onEdit}
            ChartData={ChartData}
            moveRow={moveRow}
            handleCheckedChange={handleCheckedChange}
            handleRadioChange={handleRadioChange}
            style={chartStyle}
          />
        </div>
      </div>
      <div className='home-board__right'>
        <RankBoard
          onEdit={onEdit}
          RankingData={RankingData}
          moveRow={moveRow}
          handleCheckedChange={handleCheckedChange}
        />
      </div>
    </div>
  )
}

export default HomeBoard
