import clsx from "clsx";
import {ComponentProps, useEffect, useState} from "react";
import ReactSelect, {GroupBase, StylesConfig} from "react-select";

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

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

export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
	const [target, setTarget] = useState<HTMLElement>();

	useEffect(() => {
		if (document) setTarget(document.body);
	}, []);

	return (
		<ReactSelect
			className={
				styles
					? undefined
					: 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",
							className,
					  )
			}
			options={options}
			value={value}
			onChange={onChange as any}
			placeholder={placeholder}
			menuPortalTarget={target}
			defaultValue={defaultValue}
			styles={
				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}
		/>
	);
}