import React, { FC } from "react";
import { Image } from "antd";
import cx from "classnames";
import Slider from "react-slick";
import styles from "./sellerProductCategory.module.scss";
import { SampleNextArrow, SamplePrevArrow } from "../common/ArrowDirections";
import router from "next/router";

const sellerProductCategory: FC<any> = ({ categories , sellerId}) => {
  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: false,
    speed: 400,
    slidesToShow: 4,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1224,
        settings: {
          slidesToShow: 3,
          dots: false,
          arrows: true,
        },
      },
      {
        breakpoint: 780,
        settings: {
          slidesToShow: 3,
          dots: false,
          arrows: true,
        },
      },
    ],
  };

  const handleCategory = (productId: any,name:any) => {
    router.push({
      pathname: `/seller/products/${productId}`,
      query: {
        category_id: productId,
        sellerid: sellerId,
        name: name
      }
    });
  };

  return (
    <>
      <div className={cx("container")} style={{ width: "95%",marginBottom:'1em' }}>
        <div className={styles.sliderMain}>
          <Slider {...slickSettings}>
            { Array.isArray(categories) && categories.filter((cat:any) => cat.isSeller == true && cat.name != "Root").map((cat: any) => {
              let img =
                cat.image_url === null ? cat.category_icon_path : cat.image_url;
              if (!img)
                img = "https://sparts.in/vendor/webkul/ui/assets/images/product/large-product-placeholder.webp";
              return (
                <div
                  key={cat.id}
                  className={styles.categoryCard}
                  onClick={(event:any)=>{handleCategory(cat.id,cat.name)}}
                >
                  <div className={styles.productCategoryImg}>
                    <Image
                      preview={false}
                      src={`${img}`}
                      alt={`${cat.name}`}
                      height={80}
                    />
                  </div>
                  <div className={styles.categoryText}>{cat.name}</div>
                </div>
              );
            })}
          </Slider>
        </div>
      </div>
    </>
  );
};

export default sellerProductCategory;