"use client";
import CustomLoading from "@/app/component/loading/Custom";
import ArrowLeftList from "@/components/icons/ArrowLeftList";
import { Button } from "@mui/material";
import Image from "next/image";
import { useRef, useEffect, useState } from "react";

function ListBime({ data }) {
  const list = useRef();
  const [showArrows, setShowArrows] = useState(false);
  const [itemWidth, setItemWidth] = useState(156);

  useEffect(() => {
    if (data?.list_bime?.length > 4) {
      setShowArrows(true);
    } else {
      setShowArrows(false);
    }
  }, [data]);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setItemWidth(window.innerWidth / 2.5);
      } else if (window.innerWidth < 1024) {
        setItemWidth(window.innerWidth / 3.5);
      } else {
        setItemWidth(156);
      }
    };

    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const handleScroll = (type) => {
    if (!list.current) return;
    list.current.scrollBy({
      left: type === "left" ? -itemWidth : itemWidth,
      behavior: "smooth",
    });
  };

  return (
    <div className="relative w-[calc(100%_-_48px)] mx-auto">
      {showArrows && (
        <Button
          variant="outlined"
          onClick={() => handleScroll("right")}
          className="!border-[#EFEFEF] md:!flex !bg-[#FFF] !absolute !right-[-24px] !top-1/2 !-translate-y-1/2 !rounded-full !min-w-fit !p-0 !w-[48px] !h-[48px] !z-20 !rotate-180"
        >
          <ArrowLeftList />
        </Button>
      )}

      <ul
        ref={list}
        className={`flex mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px] ${showArrows ? "overflow-x-auto hidden-scroll" : "overflow-visible" }`}
      >
        {data?.list_bime?.map((item, idx) => (
          <CustomLoading key={idx} width={itemWidth} height={110}>
            <li
              className="p-[16px] border border-[#EFEFEF] h-[175px] flex flex-col items-center justify-center gap-[20px]"
              style={{ minWidth: itemWidth }}
            >
              <Image
                src={item.logo?.[0]?.url || "/assets/images/logo.png"}
                height={92}
                width={92}
                alt="bime"
                className="object-contain"
              />
              <h3 className="text-[#525252] text-[16px] font-medium text-center">
                {item.name}
              </h3>
            </li>
          </CustomLoading>
        ))}
      </ul>

      {showArrows && (
        <Button
          variant="outlined"
          onClick={() => handleScroll("left")}
          className="!border-[#EFEFEF] md:!flex !bg-[#FFF] !absolute !left-[-24px] !top-1/2 !-translate-y-1/2 !rounded-full !min-w-fit !p-0 !w-[48px] !h-[48px] !z-20"
        >
          <ArrowLeftList />
        </Button>
      )}
    </div>
  );
}

export default ListBime;
