import Autocomplete from "@mui/material/Autocomplete";
import type { AutocompleteProps } from "@mui/material/Autocomplete";
import { TextField, Checkbox } from "@/Components/inputs";
import ListItem from "@mui/material/ListItem";
import Stack from "@mui/material/Stack";
import { useTheme } from "@mui/material/styles";
import { FieldLabel } from "./FieldLabel";
import { ChevronDown } from "lucide-react";

type AutoCompleteInputProps = Omit<
	AutocompleteProps<any, boolean, boolean, boolean>,
	"renderInput"
> & {
	renderInput?: AutocompleteProps<any, boolean, boolean, boolean>["renderInput"];
	fieldLabel?: string;
	required?: boolean;
};

export const AutoCompleteInput = ({
	fieldLabel,
	required,
	renderInput,
	...props
}: AutoCompleteInputProps) => {
	const theme = useTheme();
	const multiple = props.multiple;

	const defaultRenderInput = (params: any) => (
		<TextField
			{...params}
			placeholder="Type to search"
		/>
	);

	const autocomplete = (
		<Autocomplete
			{...props}
			disableCloseOnSelect={!!multiple}
			popupIcon={
				<ChevronDown
					size={18}
					strokeWidth={1.5}
					style={{ marginRight: theme.spacing(3) }}
				/>
			}
			renderInput={renderInput || defaultRenderInput}
			getOptionKey={(option) => option.id}
			renderTags={() => null}
			renderOption={(props, option, { selected }) => {
				const { key, ...optionProps } = props;
				return (
					<ListItem
						key={key}
						{...optionProps}
					>
						<Stack
							direction={"row"}
							alignItems={"center"}
							gap={theme.spacing(2)}
						>
							{multiple && <Checkbox checked={selected} />}
							{option.name}
						</Stack>
					</ListItem>
				);
			}}
			sx={{
				"&.MuiAutocomplete-root .MuiAutocomplete-input": {
					padding: `0 ${theme.spacing(5)}`,
				},
				"& .MuiInputBase-root .MuiAutocomplete-endAdornment": {
					right: theme.spacing(3),
				},
			}}
		/>
	);

	if (fieldLabel) {
		return (
			<Stack spacing={theme.spacing(2)}>
				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
				{autocomplete}
			</Stack>
		);
	}

	return autocomplete;
};