import {FC, memo, useEffect, useMemo, useState} from "react";
import Select from "react-select";
import {isNonNullable} from "../../../src/utils";
import details from "../../../res/details.json";
import styles from "./FactorySelect.module.css";
import {EntitySpan} from "../EntitySpan/EntitySpan";

interface Props {
  id: string
  factories: string[]
  onSetFactories: (factories: string[]) => void
}

const options = details.map(detail => ({
  label: detail.name,
  value: detail.href
}))

const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
  const state = useMemo<typeof options>(() => {
    return factories
      .map(factory => options.find(option => option.value === factory))
      .filter(isNonNullable)
  }, [factories])

  return <Select
    id={id}
    instanceId={id}
    value={state}
    components={{
      MultiValueLabel: ({data, innerProps}) => (
        <EntitySpan {...innerProps} value={data.value} simpleStyle={true}/>
      ),
      Option: ({innerProps, data}) => (
        <div {...innerProps} className={styles.option}><EntitySpan value={data.value} simpleStyle={true}/></div>
      )
    }}
    isMulti
    options={options as never}
    onChange={e => {
      onSetFactories(e.map(s => s?.value))
    }}
    className={styles.select}
    classNamePrefix={"factory-select"}
  />
}

export const FactorySelect = memo(FactorySelectBase)