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

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

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

  const [collapseState, updateCollapseState] = useCollapseState(
    'SalesOverview',
    {
      clientStats: true,
      salesOrderStats: true
    }
  )

  if (!connected) {
    return null
  }

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

export default SalesOverview