import { useGroups } from '../contexts/GroupProvider'
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'
import { useFactories } from '../contexts/FactoryProvider'
import { i18n, I18n } from '../shared/I18n/I18n'
import { useIntl } from 'react-intl'

export const PageOverview: FC = () => {
  const intl = useIntl()
  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>
          <I18n id={'page.visualize.details.title'} />
        </title>
        <meta name='description' content={i18n(intl, 'page.home.head.meta.description')} />
      </Head>
      <main>
        <ScrollContainer>
          <h1>
            <I18n id={'page.visualize.details.title'} />
          </h1>
          <ProducingGraph
            nodes={producingNodes}
            inputs={baseFactories}
            childType={NodeOverview}
            mergeHidden={true}
          />
        </ScrollContainer>
      </main>
    </>
  )
}
