import clsx from "clsx";
import { ComponentProps, useEffect, useState } from "react";
import ReactSelect, { GroupBase, StylesConfig } from "react-select";
import Option from "@/interfaces/option";

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

interface MultiProps {
	isMulti: true
	onChange: (value: Option[] | null) => void
}

interface SingleProps {
	isMulti?: false
	onChange: (value: Option | null) => void
}

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

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

	return (
		<div className="w-full flex flex-col gap-3">
			{label && <label className="font-normal text-base text-mti-gray-dim">{label}</label>}
			<ReactSelect
				isMulti={isMulti}
				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}
			/>
		</div>
	);
}