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

function AutoCompleteSelect({
  list,
  value,
  isError,
  updateData,
  name,
  label,
  disabled = false,
  listboxProps
}) {
  return (
    <Autocomplete
      disablePortal
      options={list}
      disabled={disabled}
      value={value || null}
      ListboxProps={listboxProps}
      className="!w-full !rounded-lg auto-complete-selector"
      onChange={(event, newValue) => {
        updateData && updateData(newValue ? newValue.label : "", name);
      }}
      sx={{
        ...styleTextSelectRight,
        // Hide Icon Number
        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
        {
          display: "none",
        },
        "& input[type=number]": {
          MozAppearance: "textfield",
        },
        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
        "& .MuiInputBase-root": {
          borderRadius: 2,
          padding: "0 !important",
          height: {
            xs: "43px !important",
            sm: "43px !important",
            md: "46px !important",
            lg: "48px !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" : "",
        },
      }}
      renderOption={(props, option) => (
        <Button
          fullWidth
          {...props}
          key={option.id || props.id}
          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
        >
          {option.label}
        </Button>
      )}
      renderInput={(params) => (
        <TextField
          fullWidth
          {...params}
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <div className="absolute left-4">
                <BottomSelect />
              </div>
            ),
          }}
          placeholder={label}
          sx={{
            borderRadius: "8px",
          }}
        />
      )}
    />
  );
}

export default AutoCompleteSelect;