import React, { FC } from "react";
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { Box } from "@mui/material";
import { SearchLookupMultipleProps } from '@/types/common/common-input-text-props';


const SearchLookupMultiple: FC<SearchLookupMultipleProps> = ({
    name,
    value,
    multiple = false,
    selectTitle = 'label',
    label = '',
    labelText = '',
    labelClassName = '',
    className,
    variant = "outlined", //'filled' | 'outlined' | 'standard'
    placeholder,
    disableClearable = false,
    options,
    error,
    bgColor = '#F9FAFB',
    borderColor = '',
    focusedBorderColor = '',
    hoverBorderColor = '',
    labelColor = '',
    required = true,
    helperText,
    textFieldSize = "small",
    disabled,
    onChange,
}) => {
    const disabledLabelStyle = {
        color: disabled ? '#000000' : '',
    };

    return (
        <Box sx={{ width: '100%' }}>
            {labelText?.trim() != "" && <div className={` mb-2 ${labelClassName} text-sm font-medium text-gray-700`}>{labelText}{required && <span className='text-red-600 '>*</span>}</div>}
            <Autocomplete
                disablePortal
                multiple={multiple}
                id="checkboxes-tags-demo"
                options={options}
                // disableCloseOnSelect
                disableClearable={disableClearable}
                getOptionLabel={(option: any) => (option && option[selectTitle]) || ''}
                value={options && value && (Array.isArray(value) ? value : options?.find((option: any) => option.value === value))}
                onChange={onChange}
                // onInputChange={onInputChange}
                renderOption={(props, option, { }) => (
                    <li {...props}>
                        {/* {multiple &&
                            <Checkbox
                                icon={icon}
                                checkedIcon={checkedIcon}
                                sx={{ marginRight: 8 }}
                                checked={selected}
                            />
                        } */}
                        {option[selectTitle]}
                    </li>
                )}
                // componentsProps={{ popper: { style: { width: 'fit-content' } } }}

                sx={{
                    fieldset: { borderColor: borderColor, width: '100%' },
                    "& .MuiInputBase-input.Mui-disabled": {
                        WebkitTextFillColor: "#000000",
                    },
                    "& .MuiOutlinedInput-root": {
                        "&.Mui-focused fieldset": {
                            borderColor: focusedBorderColor
                        },
                        '&:hover fieldset': {
                            borderColor: hoverBorderColor,
                        },
                    },
                    "& label.Mui-focused": {
                        color: labelColor
                    },
                    // '& .MuiInputBase-root.Mui-disabled': {
                    backgroundColor: bgColor ? bgColor : '',
                    // },
                }}
                renderInput={(params: any) =>
                    <TextField
                        {...params}
                        variant={variant}
                        label={label}
                        name={name}
                        className={className}
                        placeholder={placeholder}
                        error={Boolean(error)}
                        // helperText={error || helperText}
                        InputLabelProps={{
                            style: disabledLabelStyle,
                        }}
                        size={textFieldSize}
                        sx={{
                            "& input::placeholder": {
                                fontSize: "12px"
                            },
                        }}
                        disabled={disabled}
                    // onClick={() => { alert("dhdh") }}
                    />}
            />
            <>
                {(error || helperText) && <div className='text-red-500 text-xs mt-1'>{error || helperText}</div>}
            </>
        </Box>
    )

}
export default SearchLookupMultiple;