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

function DefaultSelect({ list, value, updateData, label, error, name }) {
  return (
    <Autocomplete
      disablePortal
      options={list}
      value={value || ""}
      getOptionLabel={(option) => {
        if (typeof option === "string") return option;
        return option?.name || option?.label || "";
      }}
      className="!w-full !rounded-lg auto-complete-selector"
      onChange={(_, newValue) => {
        updateData(name, newValue?.label || newValue || "");
      }}
      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: error
            ? "1px solid red !important"
            : "1px solid #D7D7D7 !important",
        },
        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
          {
            borderColor: error ? "red !important" : "#D7D7D7 !important",
          },
        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
          {
            border: "1px solid #5559CE !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.name || 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 DefaultSelect;