import BottomSelect from "@/components/icons/BottomSelect";
import { Autocomplete, TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui";

function AutoCompleteSelect({ list, isError, updateData, name, label }) {
    return (
        <Autocomplete
            disablePortal
            options={list}
            className="!w-full !rounded-lg"
            onChange={(event) =>
                updateData &&
                updateData(event, name)
            }
            sx={{
                ...styleTextSelectRight,
                // Hide Icon Number
                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
                    display: 'none'
                },
                '& input[type=number]': {
                    MozAppearance: 'textfield'
                },
                '& .MuiInputBase-root': {
                    borderRadius: 2,
                    padding: '5px 16px !important'
                },
                '& .MuiOutlinedInput-notchedOutline': {
                    border: '1px solid #D7D7D7'
                },
                '& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline': {
                    borderColor: "#D7D7D7 !important"
                },
                '& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    border: '1px solid #5559CE !important'
                },
                '& .MuiOutlinedInput-notchedOutline': {
                    border: isError ? '1px solid red !important' : ''
                }
            }}
            renderInput={params =>
                <TextField
                    fullWidth
                    {...params}
                    InputProps={{
                        ...params.InputProps,
                        endAdornment: (
                            <div
                                className="absolute left-4"
                            >
                                <BottomSelect />
                            </div>
                        )
                    }}
                    placeholder={label}
                    sx={{
                        borderRadius: '8px'
                    }}
                />
            }
        />
    )
}

export default AutoCompleteSelect