import {FC, useMemo} from "react";
import {EnrichedEntity, Recipe} from "../../src/types";
import styles from './ProducingGraph.module.css'
import {EntityIcon} from "../home/EntityIcon/EntityIcon";
import {sortByProperty} from "../../src/utils";
import Link from "next/link";
import {RecipeSpan} from "../home/Recipe/Recipe";

export interface ProducingNode {
  inputs: string[]
  outputs: string[]
  name: string
  icons?: (EnrichedEntity|string)[]
  linkOut?: string
  recipe?: Recipe
}

interface Props {
  nodes: ProducingNode[]
  inputs: string[]
}

export const ProducingGraph:  FC<Props> = ({nodes, inputs}) => {
  const rows: ProducingNode[][] = useMemo(() => {
    const available = new Set(inputs)
    let todo = [...nodes]
    const result: ProducingNode[][] = []
    while (todo.length) {
      const amount = todo.length
      const thisRow: string[] = []
      result.push([])

      todo = todo.filter((node) => {
        if (node.inputs.every(input => available.has(input))) {
          result[result.length - 1].push(node)
          thisRow.push(...node.outputs)
          return false
        }
        return true
      })
      thisRow.map(uid => available.add(uid))
      result[result.length - 1].sort(sortByProperty(val => -val.outputs.length * 1000 + -val.inputs.length))

      if (amount === todo.length) {
        console.warn("Loop detected! Left over:", todo)
        result.pop()
        break
      }
    }
    return result
  }, [inputs, nodes])

  return <div className={styles.plane}>
    {inputs.map((input, idx) => <EntityIcon className={styles.input} style={{left: 75 * idx}} key={input} value={input} />)}
    {rows.map((row, colIdx) => row.map((node, idx) => (
      <div
        className={styles.node}
        key={node.name}
        style={{left: 220*idx, top: 320*colIdx+100}}
      >
        { node.linkOut && <Link className={styles.linkOut} href={node.linkOut}>🔗</Link> }
        <h3>{node.name}</h3>
        { node.icons?.length ? <div className={styles.tiny}>
          {node.icons.map((input) => <EntityIcon key={typeof input === "string" ? input : input.href} value={input} />)}
        </div> : null }
        {
          node.recipe
            ? <RecipeSpan recipe={node.recipe}/>
            : <>
              <h4>Inputs</h4>
              <div className={styles.small}>
                {node.inputs.map((input) => <EntityIcon key={input} value={input} />)}
              </div>
              {node.outputs.length ? <>
                <h4>Outputs</h4>
                <div className={styles.small}>
                  {node.outputs.map((input) => <EntityIcon key={input} value={input} />)}
                </div>
              </>: null}
            </>
        }
      </div>
    )))}
  </div>
}