import { ElementRef, FC, useMemo, useRef } from 'react'
import { GroupBox } from './GroupBox/GroupBox'
import styles from './Home.module.css'
import { EnrichedEntity } from '../../src/types'
import { EntitySpan } from './EntitySpan/EntitySpan'
import { useGroups } from '../contexts/GroupProvider'
import { Preferences } from './Preferences/Preferences'
import { download, streamToArrayBuffer } from '../../src/download'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { i18n, I18n } from '../shared/I18n/I18n'
import { useFactories } from '../contexts/FactoryProvider'
import { GraphIcon } from '../icons/GraphIcon'
import { useIntl } from 'react-intl'

export const Home: FC = () => {
  const intl = useIntl()
  const { query } = useRouter()
  const { factories } = useFactories()
  const preferencesRef = useRef<ElementRef<typeof Preferences>>(null)
  const { groups, doNotSuggest, ignoredFactories, setIgnoredFactories, store, load } = useGroups()
  const inputRef = useRef<HTMLInputElement>(null)

  const [missingExport, missingMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
    return factories
      .filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
      .reduce(
        (acc, factory) =>
          (factory.usedBy?.length ?? 0) >= 3
            ? [[...acc[0], factory], acc[1]]
            : [acc[0], [...acc[1], factory]],
        [[], []] as [EnrichedEntity[], EnrichedEntity[]]
      )
  }, [factories, doNotSuggest])

  return (
    <main>
      <h1>
        <I18n id={'page.home.title'} />
      </h1>
      <p>
        <I18n id={'page.home.description'} />
      </p>
      <button
        onClick={() => {
          download('factorio-microservices.bin', store())
        }}
      >
        <I18n id={'page.home.pref.download'} />
      </button>
      <input
        type={'file'}
        multiple={false}
        ref={inputRef}
        onChange={async evt => {
          const stream = evt.currentTarget.files?.[0].stream() as
            | globalThis.ReadableStream<Uint8Array>
            | undefined
          if (stream) {
            const array = await streamToArrayBuffer(stream)
            load(array)
            if (inputRef.current) inputRef.current.value = null as unknown as string
          }
        }}
      />
      <Link href={{ pathname: '/visualize', query }}>
        <a>
          <I18n id={'page.home.pref.visualize'} />
          <GraphIcon />
        </a>
      </Link>
      <Preferences ref={preferencesRef} />
      <fieldset>
        <legend>
          <I18n id={'page.home.group.missing.export.title'} />
        </legend>
        <span>
          <I18n id={'page.home.group.missing.export.description'} />
        </span>
        <div className={styles.missingFactories}>
          {missingExport.map(missing => (
            <EntitySpan
              key={missing.href}
              value={missing}
              onClick={() => {
                preferencesRef.current?.addGroup(missing.name, [missing.href])
              }}
              onContextMenu={event => {
                event.preventDefault()
                setIgnoredFactories([...ignoredFactories, missing.href])
              }}
              leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_new_export')}
              rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
            />
          ))}
        </div>
      </fieldset>
      <fieldset>
        <legend>
          <I18n id={'page.home.group.missing.mall.title'} />
        </legend>
        <span>
          <I18n id={'page.home.group.missing.mall.description'} />
        </span>
        <div className={styles.missingFactories}>
          {missingMall.map(missing => (
            <EntitySpan
              key={missing.href}
              value={missing}
              onClick={() => {
                preferencesRef.current?.addGroup(missing.name, undefined, [missing.href])
              }}
              onContextMenu={event => {
                event.preventDefault()
                setIgnoredFactories([...ignoredFactories, missing.href])
              }}
              leftClickText={i18n(intl, 'page.home.tooltip.action.add_to_new_mall')}
              rightClickText={i18n(intl, 'page.home.tooltip.action.exclude_suggestion')}
            />
          ))}
        </div>
      </fieldset>
      <div className={styles.grid}>
        {Object.values(groups)
          .sort((a, b) => a.name.localeCompare(b.name))
          .map(group => (
            <GroupBox key={group.name} group={group} />
          ))}
      </div>
    </main>
  )
}