import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import dynamic from "next/dynamic";
import Router from "next/router";
import { connect } from "react-redux";

import Navbar from "../../components/Navbar";
// import Dropdown from '../../components/Dropdown'
import Footer from "../../components/Footer";
import Card from "../../components/Card";
import Loader from "../../components/Loader";
// import Carousel from '../../components/Carousel'
const Carousel = dynamic(() => import("../../components/Carousel"), {
  ssr: false,
});
const Dropdown = dynamic(() => import("../../components/Dropdown"), {
  ssr: false,
});

import ReactPaginate from "react-paginate";
import styles from "../../assets/scoped/products.module.sass";
import { isLaptopSize, isMobileSize } from "../../utils/helper";
import { CarouselImg } from "../../store/actions/HomePageApi";
import { getListProduct } from "../../store/actions/ListProductApi";
import { getDropDownProduct } from "../../store/actions/CategoryProductSelectApi";

const Product = ({
  CarouselHome,
  CarouselImg,
  getListProduct,
  ListProduct,
  TotalProduct,
  CategoryProduct,
  getDropDownProduct,
  isLoading,
}) => {
  console.log(CarouselHome, "carousel");
  const [perPage, setPerPage] = useState(9); //per page 9
  const [currentPage, setCurrentPage] = useState(0);
  const [pageCount, setPageCount] = useState(0);
  const [slice, setSlice] = useState([]);
  // const [offset, setOffset] = useState(0)

  // state for product
  const [page, setPage] = useState(0);
  const [categories, setCategories] = useState(0);
  const [statusApi, setStatusApi] = useState("all");
  const [sort, setSort] = useState("");
  const [active, setActive] = useState({});

  useEffect(() => {
    CarouselImg();
    getListProduct(
      Router.router.query.page,
      Router.router.query.category,
      statusApi,
      sort
    );
    getDropDownProduct();
    setActive(
      CategoryProduct.filter(
        (res) => String(res.valueId) === Router.router.query.category
      )[0]
    );
  }, []);

  useEffect(() => {
    setSlice(ListProduct);
    setPageCount(Math.ceil(TotalProduct / perPage));
    setPage(0);
    setCurrentPage(page);
  }, [ListProduct, TotalProduct, perPage, setSlice, setPageCount]);

  const category = async (id) => {
    Router.push({
      pathname: "/product",
      query: { page: page, category: id },
    });
    await setPage(0);
    await setCategories(id);
    await getListProduct(page, id, statusApi, sort);
  };

  const status = async (status) => {
    Router.push({
      pathname: "/product",
      query: {
        page: page,
        category: categories,
        status: status,
      },
    });
    await setStatusApi(status);
    await getListProduct(page, categories, status, sort);
  };

  const sorted = async (valueId) => {
    Router.push({
      pathname: "/product",
      query: {
        page: 1,
        category: categories,
        status: statusApi,
        sort:
          valueId === "-final_price"
            ? "dsc"
            : valueId === "final_price"
            ? "asc"
            : "",
      },
    });
    await setSort(valueId);
    await getListProduct(page, categories, statusApi, valueId);
  };

  const data = async (payload) => {
    Router.push({
      pathname: "/product",
      query: { page: payload },
    });
    await setPage(payload);
    await getListProduct(payload, categories, statusApi, sort);
    await window.scrollTo(0, 700);
  };

  const handleClick = ({ selected }) => {
    setCurrentPage(selected);
    // setOffset(selected * perPage)
    // const newOffside = selected * perPage
    data(selected);
  };

  const categoryDropdown =
    CategoryProduct &&
    [
      ...CategoryProduct,
      { id: 1, defaultName: "All Category", value: 0, valueId: 0 },
    ].sort((a, b) => a.valueId - b.valueId);

  return (
    <div>
      <Navbar active="shop" />
      <div className={styles.containercarousel}>
        <Carousel
          datas={CarouselHome}
          type="product"
          width={isLaptopSize ? "1600px" : "100%"}
          height={isLaptopSize ? "835px" : "100%"}
        />
      </div>
      <section className={styles.contentsection}>
        <div className={styles.content}>
          <div className={styles.wrapperdropdown}>
            <div className={styles.categorysize}>
              <div className={styles.category}>
                <Dropdown
                  border="1px solid #c4c4c4"
                  handleChange={category}
                  warding={categoryDropdown}
                  active={active}
                />
              </div>
              <div className={styles.size}>
                <Dropdown
                  border="1px solid #c4c4c4"
                  handleChange={status}
                  warding={[
                    {
                      id: 1,
                      defaultName: "All Status",
                      value: "",
                      valueId: "all",
                    },
                    {
                      id: 2,
                      defaultName: "New",
                      value: "New",
                      valueId: "new",
                    },
                    {
                      id: 3,
                      defaultName: "Sale",
                      value: "Sale",
                      valueId: "sale",
                    },
                    {
                      id: 4,
                      defaultName: "Out of Stock",
                      value: "Out of Stock",
                      valueId: "out_of_stock",
                    },
                    {
                      id: 5,
                      defaultName: "None",
                      value: "None",
                      valueId: "none",
                    },
                  ]}
                  setPage={setPage}
                />
              </div>
            </div>
            <div className={styles.wrappersort}>
              <h6 className="t-black left-align spacing-normal reg">
                {isMobileSize ? "" : "Sort by :"}
              </h6>
              <div className={styles.sort}>
                <Dropdown
                  border="1px solid #c4c4c4"
                  handleChange={sorted}
                  setPage={setPage}
                  warding={[
                    {
                      id: 1,
                      defaultName: "Most Related",
                      value: "",
                      valueId: "",
                    },
                    {
                      id: 2,
                      defaultName: "Highest Price",
                      value: "Highest Price",
                      valueId: "-final_price",
                    },
                    {
                      id: 3,
                      defaultName: "Lowest Price",
                      value: "Lowest Price",
                      valueId: "final_price",
                    },
                  ]}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className={styles.cardsection}>
        {isLoading ? (
          <div className={[styles.wrapperloader, "row"].join(" ")}>
            {[1, 2, 3].map((res) => (
              <div className={styles.card} key={res}>
                <Loader />
              </div>
            ))}
          </div>
        ) : (
          <div className={[styles.wrappercard, "row"].join(" ")}>
            <Card data={slice && slice} />
            <div className={[styles.wrapperpagination, "col-sm-12"].join(" ")}>
              <ReactPaginate
                previousLabel={""}
                previousClassName={styles.previous}
                nextClassName={styles.next}
                nextLabel={""}
                breakLabel={"..."}
                breakClassName={"break-me"}
                pageCount={pageCount}
                forcePage={currentPage}
                marginPagesDisplayed={2}
                pageRangeDisplayed={5}
                onPageChange={handleClick}
                containerClassName={styles.pagination}
                subContainerClassName={[styles.pagination, "pages"].join(" ")}
                activeClassName={styles.active}
              />
            </div>
          </div>
        )}
      </section>
      <Footer />
    </div>
  );
};

Product.propTypes = {};
//untuk ngambil data dari redux
const mapStateToProps = ({
  CarouselHome,
  ListProduct,
  TotalProduct,
  CategoryProduct,
}) => ({
  CarouselHome: CarouselHome.img,
  TotalProduct,
  ListProduct: ListProduct.product,
  CategoryProduct: CategoryProduct.category,
  isLoading: ListProduct.loading,
});

//triger api dari action
const mapDispatchToProps = (dispatch) => ({
  CarouselImg: () => dispatch(CarouselImg()),
  getListProduct: (page, id, status, price) =>
    dispatch(getListProduct(page, id, status, price)),
  getDropDownProduct: () => dispatch(getDropDownProduct()),
});

// using React.memo to achieve PureComponents
export default React.memo(
  connect(mapStateToProps, mapDispatchToProps)(Product)
);