"use client";
import {
	FieldValues,
	Path,
	RegisterOptions,
	UseFormReturn,
} from "react-hook-form";
import SelectTemplate, {
	Props as SelectTemplateProps,
	StylesConfig,
} from "react-select";
import { cn } from "../../../helper/cn";
import dynamic from "next/dynamic";

interface SelectProps<T extends FieldValues> {
	name: Path<T>;
	form: UseFormReturn<T>;
	formOptions?: RegisterOptions<T>;
	label?: string;
	placeholder?: string;
	className?: string;
}

const customStyles: StylesConfig<any, false> = {
	control: (provided) => ({
		...provided,
		backgroundColor: "var(--color-base-100)",
		borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
		borderRadius: "0.5rem",
		padding: "0.25rem",
		boxShadow: "none",
		"&:hover": {
			borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
		},
	}),
	option: (provided, state) => ({
		...provided,
		backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
		color: "var(--color-primary-content)",
		"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
	}),
	multiValueLabel: (provided) => ({
		...provided,
		color: "var(--color-primary-content)",
	}),
	singleValue: (provided) => ({
		...provided,
		color: "var(--color-primary-content)",
	}),
	multiValue: (provided) => ({
		...provided,
		backgroundColor: "var(--color-base-300)",
	}),
	menu: (provided) => ({
		...provided,
		backgroundColor: "var(--color-base-100)",
		borderRadius: "0.5rem",
	}),
};

const SelectCom = <T extends FieldValues>({
	name,
	label = name,
	placeholder = label,
	form,
	formOptions,
	className,
	...inputProps
}: SelectProps<T>) => {
	return (
		<div>
			<span className="label-text text-lg flex items-center gap-2">
				{label}
			</span>
			<SelectTemplate
				{...form.register(name, formOptions)}
				onChange={(newValue: any) => {
					if (Array.isArray(newValue)) {
						form.setValue(name, newValue.map((v: any) => v.value) as any);
					} else {
						form.setValue(name, newValue.value);
					}
					form.trigger(name);
				}}
				styles={customStyles}
				className={cn("w-full placeholder:text-neutral-600", className)}
				placeholder={placeholder}
				{...inputProps}
			/>
			{form.formState.errors[name]?.message && (
				<p className="text-error">
					{form.formState.errors[name].message as string}
				</p>
			)}
		</div>
	);
};

const SelectWrapper = (props: any) => <SelectCom {...props} />;

export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
	ssr: false,
});