import clsx from "clsx";
import { ComponentProps } from "react";
import ReactSelect from "react-select";

interface Option {
  [key: string]: any;
  value: string;
  label: string;
}

interface Props {
  defaultValue?: Option;
  value?: Option | null;
  options: Option[];
  disabled?: boolean;
  placeholder?: string;
  onChange: (value: Option | null) => void;
  isClearable?: boolean;
}

export default function Select({
  value,
  defaultValue,
  options,
  placeholder,
  disabled,
  onChange,
  isClearable,
}: Props) {
  return (
    <ReactSelect
      className={clsx(
        "placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
        disabled &&
          "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
      )}
      options={options}
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      menuPortalTarget={document?.body}
      defaultValue={defaultValue}
      styles={{
        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
        control: (styles) => ({
          ...styles,
          paddingLeft: "4px",
          border: "none",
          outline: "none",
          ":focus": {
            outline: "none",
          },
        }),
        option: (styles, state) => ({
          ...styles,
          backgroundColor: state.isFocused
            ? "#D5D9F0"
            : state.isSelected
              ? "#7872BF"
              : "white",
          color: state.isFocused ? "black" : styles.color,
        }),
      }}
      isDisabled={disabled}
      isClearable={isClearable}
    />
  );
}
