node-factorio-recipes/components/Group.tsx

import {FC, useMemo} from "react";
import {FactorySelect} from "./FactorySelect";
import {useDetails} from "../src/hooks/useDetails";
import {Entity} from "../src/types";
import styles from "./Group.module.css"

interface Props {
  onRemove: () => void
  onSetOutputFactories: (uids: string[]) => void
  outputFactories: string[]
  onSetIntermediateFactories: (uids: string[]) => void
  intermediateFactories: string[]
  onSetInputFactories: (uids: string[]) => void
  inputFactories: string[]
  onRename: (name: string) => void
  onDoIgnore: (name: string) => void
  name: string
  doNotSuggest: string[]
}

export const Group: FC<Props> = ({
  onRemove,
  onRename,
  onSetOutputFactories,
  outputFactories,
  onSetIntermediateFactories,
  intermediateFactories,
  onSetInputFactories,
  inputFactories,
  name,
  doNotSuggest,
  onDoIgnore
}) => {
  const details = useDetails()

  const inputs = useMemo<string[]>(() => {
    const newData: string[] = details
      .filter(detail => intermediateFactories.includes(detail.href) || outputFactories.includes(detail.href))
      .flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
    const uniqueInputs = Array.from(new Set(newData))
    return uniqueInputs
      .filter(input => !intermediateFactories.includes(input) && !outputFactories.includes(input))
  }, [details, intermediateFactories, outputFactories])

  const suggestions = useMemo<Entity[]>(() => {
    const availableIngredients = Array.from(new Set([...intermediateFactories, ...outputFactories, ...inputs, ...inputFactories]))
    const selectedValues = Array.from(new Set([...intermediateFactories, ...outputFactories, ...inputFactories]))
    return details
      .filter(detail => {
        if (!detail.recipe) return false
        if (selectedValues.includes(detail.href)) return false
        if (doNotSuggest.includes(detail.href)) return false
        const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
        /*if (intermediateFactories.length) {
          const usesInter = prerequisites.some(pre => outputFactories.includes(pre) || intermediateFactories.includes(pre))
          if (!usesInter) return false
        } else {
          const usesEveryInput = inputs.every(inp => prerequisites.includes(inp))
          if (!usesEveryInput) return false
        }*/
        return prerequisites.every(pre => availableIngredients.includes(pre))

      })
  }, [inputFactories, doNotSuggest, details, inputs, intermediateFactories, outputFactories])

  const addIntermediateFactory = (uid: string) => {
    onSetIntermediateFactories([...intermediateFactories, uid])
  }

  const addOutputFactory = (uid: string) => {
    onSetOutputFactories([...outputFactories, uid])
  }

  return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
    <div>
      <h3 contentEditable={true} onBlur={event => {
        event.currentTarget.innerText = event.currentTarget.innerText.trim()
        onRename(event.currentTarget.innerText);
      }}>
        {name}
      </h3>
      <button onClick={onRemove} style={{display: 'block'}}>X</button>
      <label>Additional Inputs</label>
      <FactorySelect
        factories={inputFactories}
        onSetFactories={onSetInputFactories}
      />
      <label>Intermediate Factories</label>
      <FactorySelect
        factories={intermediateFactories}
        onSetFactories={onSetIntermediateFactories}
      />
      <label>Output Factories</label>
      <FactorySelect
        factories={outputFactories}
        onSetFactories={onSetOutputFactories}
      />
      <div className={styles.grid}>
        <div>
          <h4>Inputs</h4>
          <ul>
            {inputs.map(input => <li key={input}><a href={'javascript:void(0)'} onClick={() => addIntermediateFactory(input)}>{input}</a></li>)}
          </ul>
        </div>
        <div>
          <h4>Suggestions</h4>
          <ul>
            {suggestions.map(suggestion => <li key={suggestion.href}>
              <a
                href={'javascript:void(0)'}
                onClick={() => addOutputFactory(suggestion.href)}
                onContextMenu={event => {
                  event.preventDefault()
                  onDoIgnore(suggestion.href)
                }}
              >
                {suggestion.name}
              </a>
            </li>)}
          </ul>
        </div>
      </div>
    </div>
  </div>
}