import axios from "axios";
import { useRouter } from "next/router";
import styles from "./sellerDetails.module.scss";
import { baseUrl, defaultImg } from "../../../constants/urls";
import React, { FC, useEffect, useState } from "react";
import pstyles from "./promotedProductsBrands.module.scss";
import _ from "lodash";

const promotedProductsBrands: FC<any> = (props) => {
  const router = useRouter();
const {brandSellerPage} =props;
  const [brandlist, setBrandlist] = useState<any>([]);
  const [sellerBrands, setSellerBrands] = useState<any>([]);
  const [sellerProducts, setSellerProducts] = useState<any>([]);

  useEffect(() => {
    getSellerProductsAndBrands();
  }, []);

  const getSellerProductsAndBrands = () => {
    axios
      .get(`${baseUrl}/api/seller-gallery-images-by-code/${router.query.id}/seller-products`)
      .then(response => {
        setSellerProducts(response.data.data);
      })
      .catch((error) => {});

    // axios
    //   .get(`${baseUrl}/api/seller-gallery-images-by-code/${router.query.id}/seller-brands`)
    //   .then(response => {
    //     setSellerBrands(response.data.data);
    //   })
    //   .catch((error) => {});
  }


  return (
    <>
      <div className={pstyles.productGrid}>
        {sellerProducts
          .map((product: any, index: number) => {
            return (
              <React.Fragment key={index + 1}>
                <div className={styles.imageStyle} >
                  <img
                    
                    src={product.image}
                    alt={"image not availabe"}
                  ></img>
                </div>
              </React.Fragment>
            );
          })}
      </div>

      <div className={pstyles.BrandsGrid}>
        {_.isArray(props?.brands)&&props?.brands?.slice(0,4).map((brand: any, index: number) => {
            return (
              <React.Fragment key={index + 1}>
                <div onClick={()=>{brandSellerPage(brand)}}>
                  <img
                    src={brand.brand_logo=="" || brand.brand_logo==null?`${defaultImg}`:`${baseUrl}/${brand.brand_logo}`}
                    alt={`image`}
                  ></img>
                </div>
              </React.Fragment>
            );
          })}
      </div>
    </>
  );
};

export default promotedProductsBrands;