import { useContext } from 'react'
import { Flex } from 'antd'
import useCollapseState from '../hooks/useCollapseState'
import StatsDisplay from '../common/StatsDisplay'
import HistoryDisplay from '../common/HistoryDisplay'
import InfoCollapse from '../common/InfoCollapse'
import ScrollBox from '../common/ScrollBox'

import { ApiServerContext } from '../context/ApiServerContext'
import ObjectTable from '../common/ObjectTable'

const ProductionOverview = () => {
  const { connected } = useContext(ApiServerContext)

  const [collapseState, updateCollapseState] = useCollapseState(
    'ProductionOverview',
    {
      printerStats: true,
      printerHistory: true,
      onlinePrinters: true,
      jobStats: true,
      productionStats: true,
      jobStatsDetails: true
    }
  )

  if (!connected) {
    return null
  }

  return (
    <Flex
      gap='large'
      vertical='true'
      style={{
        maxHeight: '100%',
        minHeight: 0
      }}
    >
      <ScrollBox>
        <Flex vertical gap={'large'}>
          <InfoCollapse
            title='Printer Statistics'
            icon={null}
            canCollapse={false}
            active={collapseState.printerStats}
            onToggle={(isActive) =>
              updateCollapseState('printerStats', isActive)
            }
            className='no-t-padding-collapse'
            collapseKey='printerStats'
          >
            <Flex
              justify='flex-start'
              gap='middle'
              wrap='wrap'
              align='flex-start'
            >
              <StatsDisplay objectType='printer' />
            </Flex>
          </InfoCollapse>

          <InfoCollapse
            title='Job Statistics'
            icon={null}
            canCollapse={false}
            active={collapseState.jobStats}
            onToggle={(isActive) => updateCollapseState('jobStats', isActive)}
            className='no-t-padding-collapse'
            collapseKey='jobStats'
          >
            <Flex
              justify='flex-start'
              gap='middle'
              wrap='wrap'
              align='flex-start'
            >
              <StatsDisplay objectType='job' />
            </Flex>
          </InfoCollapse>

          <Flex gap='large' wrap='wrap'>
            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
              <InfoCollapse
                title='Printer History'
                icon={null}
                active={collapseState.printerHistory}
                onToggle={(isActive) =>
                  updateCollapseState('printerHistory', isActive)
                }
                collapseKey='printerHistory'
                canCollapse={false}
              >
                <HistoryDisplay objectType='printer' />
              </InfoCollapse>
              <InfoCollapse
                title='Online Printers'
                icon={null}
                active={collapseState.onlinePrinters}
                onToggle={(isActive) =>
                  updateCollapseState('onlinePrinters', isActive)
                }
                collapseKey='onlinePrinters'
                canCollapse={false}
              >
                <ObjectTable type='printer' masterFilter={{ online: true }} />
              </InfoCollapse>
            </Flex>
            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
              <InfoCollapse
                title='Job History'
                icon={null}
                active={collapseState.jobHistory}
                onToggle={(isActive) =>
                  updateCollapseState('jobHistory', isActive)
                }
                canCollapse={false}
                collapseKey='jobHistory'
              >
                <HistoryDisplay objectType='job' />
              </InfoCollapse>
              <InfoCollapse
                title='Queued Jobs'
                icon={null}
                active={collapseState.queuedJobs}
                onToggle={(isActive) =>
                  updateCollapseState('queuedJobs', isActive)
                }
                canCollapse={false}
                collapseKey='queuedJobs'
              >
                <ObjectTable
                  type='job'
                  masterFilter={{ 'state.type': 'queued' }}
                />
              </InfoCollapse>
            </Flex>
          </Flex>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default ProductionOverview