import {FC, HTMLProps} from "react";
import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
import {EnrichedEntity, Recipe} from "../../../src/types";
import cx from "classnames";
import styles from "./NodeOverview.module.css";
import {RecipeSpan} from "../../home/Recipe/Recipe";
import Link from "next/link";
import {EntityIcon} from "../../home/EntityIcon/EntityIcon";

export type OverviewGraphNode = GraphNode<{
  icons: (EnrichedEntity|string)[]
  linkOut: string
}>

interface Props extends HTMLProps<HTMLDivElement> {
  node: OverviewGraphNode
}

export const NodeOverview: FC<Props> = ({node, className, ...props}) => {
  return <div {...props} className={cx(className, styles.root)}>
    <h3><span className={styles.linkOut}><Link href={node.linkOut}>🔗</Link></span>{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 }
    <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>
}