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

interface GraphNodeBase {
  inputs: string[]
  outputs: string[]
  name: string
}

export type GraphNode<T extends Record<string, unknown>> = GraphNodeBase & T

interface Props<T extends {}> {
  nodes: GraphNode<T>[]
  inputs: string[]
  outputs?: string[]
  childType: FC<HTMLProps<HTMLDivElement> & {node: GraphNode<T>}>
}

export const ProducingGraph = <T extends Record<string, unknown>,>({nodes, inputs, outputs, childType: ChildType}: PropsWithChildren<Props<T>>) => {
  const rows: GraphNode<T>[][] = useMemo(() => {
    const available = new Set(inputs)
    let todo = [...nodes]
    const result: GraphNode<T>[][] = []
    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}>
    <div className={styles.row}>
      {inputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
    </div>
    {rows.map((row, colIdx) => {
      return <div className={styles.row} key={colIdx}>
        {
          row.map((node) => <ChildType
            className={styles.node}
            key={node.name}
            node={node}
          />)
        }
      </div>
    })}
    {outputs ? <div className={styles.row}>
      {outputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
    </div> : null }
  </div>
}