import {FC, useMemo, useState} from "react";
import {GroupBox} from "./Group/Group";
import {FactorySelect} from "./FactorySelect/FactorySelect";
import styles from "./Home.module.css"
import {useFactories} from "../../src/hooks/useFactories";
import {Entity} from "../../src/types";
import pako from 'pako';
import {EntitySpan} from "./EntitySpan/EntitySpan";
import {useGroups} from "../contexts/GroupProvider";
import {sortByProperty} from "../../src/utils";
import {Preferences} from "./Preferences/Preferences";

export const HomeComponent: FC = () => {
  const {factories} = useFactories()
  const {
    groups,
    addGroup,
    doNotSuggest,
    baseFactories,
    setBaseFactories,
    ignoredFactories,
    setIgnoredFactories
  } = useGroups()
  const [newGroupValue, setNewGroupValue] = useState("New group")

  const missingFactories = useMemo<Entity[]>(() => {
    return factories.filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
  }, [factories, doNotSuggest])

  const store = () => {
    const string = JSON.stringify(groups)
    const btoa = (bin: Uint8Array) => Buffer.from(bin).toString('base64')
    const atob = (str: string) => Buffer.from(str, 'base64')
    const compressed = btoa(pako.deflate(string))
    console.log(string.length, compressed.length)
    const uncompressed = pako.inflate(atob(compressed), {to: "string"})
  }

  return (
    <main>
      <h1>Factorio Microservices</h1>
      <button onClick={store}>Store</button>
      <Preferences />
      <fieldset>
        <legend>Missing factories</legend>
        <div className={styles.missingFactories}>
          { missingFactories.map(missing => (
            <EntitySpan
              key={missing.href}
              value={missing}
              onClick={() => {
                addGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [missing.href])
                setNewGroupValue("New group")
              }}
              onContextMenu={event => {
                event.preventDefault()
                setIgnoredFactories([...ignoredFactories, missing.href])
              }}
              leftClickText={"Create a new factory with this item and name"}
              rightClickText={"Exclude this recipe from suggestions"}
            />
          ))}
        </div>
      </fieldset>
      <div className={styles.grid}>
        {
          Object.values(groups).sort(sortByProperty(g => g.name)).map((group) => <GroupBox key={group.name} group={group} />)
        }
      </div>
    </main>
  )
}
