import cx from "classnames";
import Slider from "react-slick";
import styles from "./findBrands.module.scss";
import { useRouter } from "next/router";
import * as ProductAPI from "../../../pages/api/brandAPI";
import * as GallaryApi from "../../../pages/api/gallaries";
import { FC, useContext, useEffect, useState } from "react";
import { baseUrl, defaultImg } from "../../../constants/urls";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import shopConetxt from "../../../context/shopConetxt";

const FindByBrands: FC<any> = ({ brands, type }) => {
  const { setCategoryTreeNested, setCategoryBreadcrumb, categoryTreeNested } =
    useContext(shopConetxt);
  const router = useRouter();
  const [sellerBrands, setSellerBrands] = useState([]);

  useEffect(() => {
    setSellerBrands(brands);
  }, [brands]);

  function SampleNextArrow(props: any) {
    const { className, style, onClick } = props;

    const handleKeyDown = (event: React.KeyboardEvent) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        onClick?.();
      }
    };

    return (
      <div
        role="button"
        tabIndex={0}
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          opacity: "1",
          right: 0,
          color: "#fff",
          justifyContent: "center",
          cursor: "pointer",
          // Ensure focus indicator is visible
          outline: "none",
        }}
        onClick={onClick}
        onKeyDown={handleKeyDown}
        aria-label="Next slide"
        // Add focus styles for better accessibility
        onFocus={(e) => (e.currentTarget.style.outline = "2px solid #fff")}
        onBlur={(e) => (e.currentTarget.style.outline = "none")}
      >
        <RightOutlined className={styles.iconRightDisplay} />
      </div>
    );
  }

  function SamplePrevArrow(props: any) {
    const { className, style, onClick, currentSlide } = props;

    const handleKeyDown = (event: React.KeyboardEvent) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        onClick?.();
      }
    };
    return (
      // <div
      //   style={{
      //     ...style,
      //     display: "block",
      //     zIndex: "15",
      //     borderRadius: "50%",
      //     opacity: "1",
      //     left: 0,
      //     color: "#fff",
      //     justifyContent: "center",
      //   }}
      //   onClick={onClick}
      // >
      //   <LeftOutlined className={styles.iconLeftDisplay} />
      // </div>

      <>
        {currentSlide !== 0 && (
          <div
            role="button"
            tabIndex={0}
            style={{
              ...style,
              display: "block",
              zIndex: "15",
              borderRadius: "50%",
              opacity: "1",
              left: 0,
              color: "#fff",
              justifyContent: "center",
            }}
            onClick={onClick}
          >
            <LeftOutlined className={styles.iconLeftDisplay} />
          </div>
        )}
      </>
    );
  }

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 10,
    slidesToScroll: 1,
    rtl: false,
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
    cssEase: 'linear',
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 8,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 3,
          arrows: false,
          centerMode: false,
          infinite: true,
          autoplay: true,
          autoplaySpeed: 2000,
        },
      },
    ],
  };

  const findByBrandName = (
    brandId: any,
    brandName: any,
    brandLogo: any,
    category_id: any
  ) => {
    setCategoryBreadcrumb([{}]);
    router.push({
      pathname: `/products/${category_id}`,
      query: {
        brand: brandName,
        brandId: brandId,
        url: brandLogo,
      },
    });
  };

  const brandAll = () => {
    router.push({ pathname: `/brands` });
  };

  return (
    <>
      <div
        className={cx("container", styles.brandDiv)}
        style={{ backgroundColor: "transparent" }}
      >
        <div className={styles.titleWrapper}>
          <h2 className={styles.sectionSubTitle}>
            <span className={styles.subtitleSpan}>Search By Brand</span>
          </h2>
          <button
            type="button"
            className={styles.viewText}
            onClick={brandAll}
          >
            View All
          </button>
        </div>
        <div className={styles.sliderContainer}>
          <Slider {...slickSettings}>
            {sellerBrands &&
              sellerBrands.map((brands: any, idx: number) => {
                return (
                  <button
                    key={brands.id}
                    type="button"
                    className={styles.home_find_brands_item}
                    onClick={() => {
                      findByBrandName(
                        brands.id,
                        brands.brand_name,
                        brands.brand_logo,
                        brands.category_id
                      );
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        findByBrandName(
                          brands.id,
                          brands.brand_name,
                          brands.brand_logo,
                          brands.category_id
                        );
                      }
                    }}
                    aria-label={`View products from ${brands.brand_name}`}
                  >
                    <img
                      className={styles.home_find_brands_img}
                      src={
                        brands.brand_logo == null || brands.brand_logo == ""
                          ? `${defaultImg}`
                          : `${baseUrl}/${brands.brand_logo}`
                      }
                      alt={
                        brands.brand_name
                          ? `${brands.brand_name} logo`
                          : "Brand logo"
                      }
                    />
                  </button>
                );
              })}
          </Slider>
        </div>
      </div>
    </>
  );
};

export default FindByBrands;