import { MutableRefObject, useEffect, useState } from "react";
import Select, { OptionsOrGroups, GroupBase } from "react-select";

type Option = { label: string | number; value: string | number };

interface SelectorProps {
  name: string;
  label?: string;
  labelComponent?: JSX.Element;
  innerRef?: MutableRefObject<any>;
  fieldClass?: string;

  options: OptionsOrGroups<Option, GroupBase<Option>>;
  value?: number | string;
  onChangeCallback?: (value: number | string) => void;

  disabled?: boolean;
}

export default function Selector({
  name,
  label,
  labelComponent,
  innerRef = null,
  fieldClass = "",
  value,
  options = [],
  onChangeCallback,
  disabled = false,
}: SelectorProps): JSX.Element {
  const [selectorValue, setSelectorValue] = useState<Option>();

  useEffect(() => {
    if (options.length === 0) return;

    const option = options.find((o: Option) => o.value === value) as Option;
    if (option) {
      setSelectorValue(option);
    }
  }, [options, value]);

  function handleChange(selectedOption: Option) {
    setSelectorValue(selectedOption);
    if (onChangeCallback) {
      onChangeCallback(selectedOption.value);
    }
  }

  return (
    <div className={`input-field ${fieldClass}`}>
      {label && (
        <label htmlFor={name} title={`${name} field`}>
          {label}
        </label>
      )}
      {labelComponent && (
        <label htmlFor={name} title={`${name} field`}>
          {labelComponent}
        </label>
      )}
      <Select
        value={selectorValue}
        onChange={handleChange}
        options={options}
        ref={innerRef}
        isDisabled={disabled}
      />
    </div>
  );
}
