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

function Selector({ data, updateData, nameKey, label, name, list }) {
  const selectedOption = list.find((item) => item.id === data) || null;

  return (
    <Autocomplete
      value={selectedOption}
      disablePortal
      options={list}
      getOptionLabel={(option) => option[nameKey] || ""}
      isOptionEqualToValue={(option, value) => option.id === value.id}
      className="!w-full !rounded-lg auto-complete-selector"
      onChange={(e, newValue) => {
        if (newValue) {
          updateData && updateData(newValue.id, "value", name);
        }
      }}
      sx={{
        ...styleTextSelectRight,
        "& 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",
          },
      }}
      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 Selector;
