import { useGroups } from '../contexts/GroupProvider'
import { useFactories } from '../../src/hooks/useFactories'
import { FC, useMemo } from 'react'
import { calculateInputs } from '../../src/calculateInputs'
import Head from 'next/head'
import { ScrollContainer } from './ScrollContainer/ScrollContainer'
import { ProducingGraph } from './ProducingGraph/ProducingGraph'
import { NodeOverview, OverviewGraphNode } from './NodeOverview/NodeOverview'

export const PageOverview: FC = () => {
  const { exportedFactories, baseFactories, groups } = useGroups()
  const { findFactory } = useFactories()

  const producingNodes: OverviewGraphNode[] = useMemo(() => {
    return Object.values(groups).map(group => ({
      inputs: calculateInputs(
        [...group.exports, ...group.malls],
        baseFactories,
        exportedFactories,
        findFactory
      )[0],
      outputs: group.exports,
      name: group.name,
      icons: [...group.exports, ...group.malls]
    }))
  }, [baseFactories, exportedFactories, findFactory, groups])

  return (
    <>
      <Head>
        <title>Factorio Microservices</title>
        <meta name='description' content='Create Factorio microservices' />
      </Head>
      <main>
        <ScrollContainer>
          <h1>Factorio Microservices</h1>
          <ProducingGraph
            nodes={producingNodes}
            inputs={baseFactories}
            childType={NodeOverview}
            mergeHidden={true}
          />
        </ScrollContainer>
      </main>
    </>
  )
}
