import { useId } from "react";
import SelectReact, { SingleValue, StylesConfig } from "react-select";

interface Option {
    value: any;
    label: string;
}

interface Props<T> {
    options: Map<T, string>;
    valor: T | null;
    onChange: (valor: T) => void;
    disabled?: boolean;
    autoFocus?: boolean;
    isAdmin?: boolean;
}

export function SelectOne<T>(p: Props<T>) {
    function onChange(option: SingleValue<Option>) {
        if (option) {
            p.onChange(option.value);
        }
    }
    const options: Option[] = [];

    p.options.forEach((v, k) => {
        options.push({ value: k, label: v });
    });

    const value = options.find((e) => e.value === p.valor);
    const styles: StylesConfig<Option> = {
        control: (base, state) => ({
            ...base,
            transition: "all 0.2s",
            border: state.isFocused ? "1px solid #80bdff" : "1px solid #ced4da",
            boxShadow: state.isFocused ? "0 0 0 0.25rem rgba(0,123,255,.25)" : "",
            "&:hover": {
                border: "default",
            },
        }),
    };

    return (
        <SelectReact<Option>
            styles={styles}
            instanceId={useId()}
            className="w-100"
            value={value}
            onChange={onChange}
            placeholder="Selecione..."
            menuPlacement="auto"
            closeMenuOnSelect
            noOptionsMessage={({ inputValue }) => (
                <span>Nenhuma opção encontrada para o termo: {inputValue}</span>
            )}
            isSearchable
            options={options}
            isDisabled={p.disabled}
            autoFocus={p.autoFocus}
        />
    );
}