import { MenuItem, Select, SvgIcon } from "@mui/material";
import SortD from "@/components/icons/SortD";
import StarDI from "@/components/icons/StarDI";
import ArrowBottomD from "@/components/icons/ArrowBottomD";

const listSort = [
  { label: 3, id: 3 },
  { label: 4, id: 4 },
  { label: 5, id: 5 },
];

function SelectSort({ filter, updateData }) {
  const handleClick = (e) => {
    updateData("sort", Number(e.target.value), true);
  };

  return (
    <Select
      displayEmpty
      value={filter.sort}
      onChange={handleClick}
      className="!w-[198px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
      renderValue={(value) => {
        return (
          <div className="w-[20px] flex gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
            <SvgIcon color="primary">
              <SortD />
            </SvgIcon>
            {value ? (
              <ul className="flex items-center justify-start gap-1">
                {Array(filter.sort)
                  .fill({})
                  .map((_, idx) => (
                    <li key={idx}>
                      <StarDI />
                    </li>
                  ))}
              </ul>
            ) : (
              "مرتب سازی"
            )}
          </div>
        );
      }}
      IconComponent={() => (
        <div
          className="mx-3 min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px] max-w-[20px] md:max-w-[22px] lg:max-w-[24px] max-h-[20px] md:max-h-[22px] lg:max-h-[24px] w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px] "
        >
          <ArrowBottomD />
        </div>
      )}
      sx={{
        "& .MuiSelect-select ": {
          paddingRight: "12px !important",
        },
        "& .MuiOutlinedInput-notchedOutline ": {
          borderColor: "#EFEFEF !important",
        },
      }}
    >
      {listSort.map((item, idx) => (
        <MenuItem
          key={idx}
          value={item.label}
          name={item.label}
          className="!flex !flex-col !items-start !w-full hover:!bg-transparent"
        >
          <div
            value={item.id}
            className="!p-2 !mr-2 !w-[calc(100%_-_16px)] flex items-center justify-start"
          >
            {Array(item.label)
              .fill({})
              .map((_, idx) => (
                <StarDI key={idx} />
              ))}
          </div>
        </MenuItem>
      ))}
    </Select>
  );
}

export default SelectSort;
