import React from "react";
import ReactSelect from "react-select";

interface OptionType {
    value: string;
    label: string;
}

interface SelectProps {
    options: OptionType[];
    value?: any;
    onChange?: (value: any) => void;
    placeholder?: string;
    isSearchable?: boolean;
    isMulti?: boolean;
    isDisabled?: boolean;
    className?: string;
    isLoading?: boolean;
    isClearable?: boolean;
}

const Select = ({
    options,
    value,
    onChange,
    placeholder = "Select an option",
    isSearchable = true,
    isMulti = false,
    isDisabled = false,
    className,
    isLoading = false,
    isClearable = false,
}: SelectProps) => {

    const customStyles = {
        control: (base: any, state: any) => ({
            ...base,
            borderColor: state.isFocused ? "#FB142C" : "", // green on focus
            boxShadow: state.isFocused ? "0 0 0 1px #FB142C" : "none",
            "&:hover": {
                borderColor: "#FB142C", // hover border color
            },
        }),

        option: (base: any, state: any) => ({
            ...base,

            backgroundColor: state.isSelected
                ? "#FB142C"          // selected
                : state.isFocused
                ? "#ffeaec"          // hover
                : "white",

            color: state.isSelected ? "white" : "#111827",

            cursor: "pointer",
            ":active": {
                backgroundColor: state.isSelected ? "#FB142C" : "#ffeaec",
            },
        }),

        multiValue: (base: any) => ({
            ...base,
            backgroundColor: "#ffeaec",
        }),

        multiValueLabel: (base: any) => ({
            ...base,
            color: "#a50a19",
        }),

        multiValueRemove: (base: any) => ({
            ...base,
            color: "#a50a19",
            ":hover": {
                backgroundColor: "#FB142C",
                color: "white",
            },
        }),
    };

    return (
        <div className={className}>
            <ReactSelect
                options={options}
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                isSearchable={isSearchable}
                isMulti={isMulti}
                isDisabled={isDisabled}
                isLoading={isLoading}
                isClearable={isClearable}
                menuPortalTarget={document.body}
                menuPosition="fixed"
                menuShouldScrollIntoView={false}
                styles={{
                    ...customStyles,
                    menuPortal: (base: any) => ({
                        ...base,
                        zIndex: 99999,
                    }),
                }}
            />
        </div>
    );
};

export default Select;