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

const InventoryOverview = () => {
  const [collapseState, updateCollapseState] = useCollapseState(
    'InventoryOverview',
    {
      inventoryStats: true,
      purchaseOrderStats: true
    }
  )

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

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

          <Flex gap='large' wrap='wrap'>
            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
              <InfoCollapse
                title='Part Stock History'
                icon={null}
                active={collapseState.partStockHistory}
                onToggle={(isActive) =>
                  updateCollapseState('partStockHistory', isActive)
                }
                collapseKey='partStockHistory'
                canCollapse={false}
              ></InfoCollapse>
            </Flex>
            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
              <InfoCollapse
                title='Filament Stock History'
                icon={null}
                active={collapseState.filamentStockHistory}
                onToggle={(isActive) =>
                  updateCollapseState('filamentStockHistory', isActive)
                }
                canCollapse={false}
                collapseKey='filamentStockHistory'
              ></InfoCollapse>
            </Flex>
            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
              <InfoCollapse
                title='Stock Event History'
                icon={null}
                active={collapseState.stockEventHistory}
                onToggle={(isActive) =>
                  updateCollapseState('stockEventHistory', isActive)
                }
                canCollapse={false}
                collapseKey='stockEventHistory'
              ></InfoCollapse>
            </Flex>
          </Flex>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default InventoryOverview