"use client";
import { prodcutData } from "@/data/product-data";
import { ProductType } from "@/interFace/interFace";
import { cart_product } from "@/redux/slices/cartSlice";
import { wishlist_product } from "@/redux/slices/wishlistSlice";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import Wrapper from "@/layout/DefaultWrapper";
import { useDispatch } from "react-redux";
import Pagination from "@/utils/Pagination";
import ShopContent from "@/components/shop/ShopContent";
import FabenCategories from "@/components/faben-categories/FabenCategories";
import { useRouter } from "next/navigation";
import httpClient from "@/utils/HttpClient";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
const ProductPage = ({ params }: any) => {
  const [productsLoading, setProductsLoading] = useState(false);
  const [products, setProducts] = useState<any>({});
  useEffect(() => {
    const fetch = async () => {
      setProductsLoading(true);
      const res = await httpClient.get(`categories/${params.id}/products`);
      console.log(res);
      setProducts(res.data);
      setProductsLoading(false);
    };

    fetch();
  }, []);

  const dispatch = useDispatch();
  const handleAddToCart = (product: ProductType) => {
    dispatch(cart_product(product));
    console.log(product);
  };
  const handleAddToWishlist = (product: ProductType) => {
    dispatch(wishlist_product(product));
  };
  return (
    <Wrapper>
      <main style={{ backgroundColor: "#fff" }}>
        <div className="row">
          <div className="col-xl-2 col-lg-2 col-md-11"></div>
          <FabenCategories />
          <div className="col-xl-6 col-lg-6 col-md-10">
            {/*<div className="row">*/}
            {/*  <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">*/}
            {/*    <div className="widget mt-50 grey-bg">*/}
            {/*      <div className="widget-title-box">*/}
            {/*        <p*/}
            {/*          style={{*/}
            {/*            color: "#000",*/}
            {/*            fontSize: "1em",*/}
            {/*            fontWeight: "bold",*/}
            {/*            paddingTop: "10px",*/}
            {/*            paddingLeft: "10px",*/}
            {/*          }}*/}
            {/*        >*/}
            {/*          ÇAP*/}
            {/*        </p>*/}
            {/*      </div>*/}
            {/*      <br />*/}
            {/*      <div style={{ maxHeight: "200px", overflowY: "auto" }}>*/}
            {/*        <ul className="cat grey-bg pt-1 pb-1">*/}
            {/*          <li*/}
            {/*          // key={item.id}*/}
            {/*          // className={activeCategory === item.id ? "active" : ""}*/}
            {/*          // onClick={() => handleCategoryClick(item.id)}*/}
            {/*          >*/}
            {/*            <Link href="">*/}
            {/*              &nbsp;&nbsp;&nbsp;2mm (3){" "}*/}
            {/*              <span className="f-right">*/}
            {/*                5mm&nbsp;&nbsp;&nbsp;&nbsp;*/}
            {/*              </span>*/}
            {/*            </Link>*/}
            {/*          </li>*/}
            {/*        </ul>*/}
            {/*      </div>*/}
            {/*    </div>*/}
            {/*  </div>*/}
            {/*  <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">*/}
            {/*    <div className="widget mt-50 grey-bg">*/}
            {/*      <div className="widget-title-box">*/}
            {/*        <p*/}
            {/*          style={{*/}
            {/*            color: "#000",*/}
            {/*            fontSize: "1em",*/}
            {/*            fontWeight: "bold",*/}
            {/*            paddingTop: "10px",*/}
            {/*            paddingLeft: "10px",*/}
            {/*          }}*/}
            {/*        >*/}
            {/*          KÖRÜK SAYISI*/}
            {/*        </p>*/}
            {/*      </div>*/}
            {/*      <br />*/}
            {/*      <div style={{ maxHeight: "200px", overflowY: "auto" }}>*/}
            {/*        <ul className="cat grey-bg pt-1 pb-1">*/}
            {/*          <li*/}
            {/*          // key={item.id}*/}
            {/*          // className={activeCategory === item.id ? "active" : ""}*/}
            {/*          // onClick={() => handleCategoryClick(item.id)}*/}
            {/*          >*/}
            {/*            <Link href="">*/}
            {/*              &nbsp;&nbsp;&nbsp;1 körük{" "}*/}
            {/*              <span className="f-right">*/}
            {/*                (64)&nbsp;&nbsp;&nbsp;*/}
            {/*              </span>*/}
            {/*            </Link>*/}
            {/*          </li>*/}
            {/*        </ul>*/}
            {/*      </div>*/}
            {/*    </div>*/}
            {/*  </div>*/}
            {/*</div>*/}
            <section className="Shop-banner-area pt-30 pb-120">
              <div className="container">
                {productsLoading && <Skeleton count={10} />}
                {products.totalCount && (
                  <>
                    <div className="row mt-20">
                      <div className="col-xl-4 col-lg-5 col-md-6">
                        <div className="product-showing mb-40">
                          <p>Toplam {products.totalCount} ürün mevcut</p>
                        </div>
                      </div>
                    </div>

                    <div className="row">
                      <div className="col-12">
                        <div className="tab-content" id="myTabContent">
                          <div
                            className="tab-pane fade show active"
                            id="home"
                            role="tabpanel"
                            aria-labelledby="home-tab"
                          >
                            <div className="row">
                              {products.items.map((item: any) => (
                                <div
                                  key={item.id}
                                  className="col-lg-3 col-md-3 col-sm-6"
                                >
                                  <div className="product mb-40">
                                    <div className="product__img">
                                      <Link
                                        href={`/product-detail/${item.seoFriendlyName}`}
                                      >
                                        <Image
                                          src={"me.png"}
                                          width={"100"}
                                          height={"150"}
                                          loader={() =>
                                            `https://fabenapi.vevasoftprojects.com/${item.image}`
                                          }
                                          alt="item-img"
                                        />
                                      </Link>
                                      <div className="product-action text-center">
                                        <Link
                                          href={`/product-detail/${item.seoFriendlyName}`}
                                        >
                                          <i className="far fa-search"> </i>
                                        </Link>
                                      </div>
                                    </div>
                                    <div className="product__content text-center pt-35">
                                      <h4 className="pro-title">
                                        <Link
                                          style={{
                                            fontSize: "0.7em",
                                            textTransform: "none",
                                          }}
                                          href={`/product-detail/${item.seoFriendlyName}`}
                                        >
                                          {" "}
                                          {item.name}{" "}
                                        </Link>
                                      </h4>
                                      <div className="price">
                                        <span style={{ color: "gray" }}>
                                          Part no.: {item.skuNo}{" "}
                                        </span>
                                      </div>
                                      <br />
                                      <span className="pro-cat">
                                        <Link
                                          href={`/product-category/${item.categorySeoFriendlyName}`}
                                        >
                                          {item.categoryName}
                                        </Link>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    {/*<Pagination/>*/}
                  </>
                )}
              </div>
            </section>
          </div>
          <div className="col-xl-2 col-lg-2 col-md-11"></div>
        </div>
      </main>
    </Wrapper>
  );
};

export default ProductPage;