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 FinanceOverview = () => {
  const { connected } = useContext(ApiServerContext)

  const [collapseState, updateCollapseState] = useCollapseState(
    'FinanceOverview',
    {
      invoiceStats: true
    }
  )

  if (!connected) {
    return null
  }

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

export default FinanceOverview