import React, { useState, FC, useEffect } from "react";
import { useRouter } from "next/router";
import ProductHeader from "../../../products/productHeader";
import ProductsList from "../../../products/productsList";
import MobileHeader from "../../mobile/mobileHeader/MobileHeader";
import MobileFooter from "../../mobile/mobileFooter/MobileFooter";
import ProductFilters from "../../../products/filters";
import { VIEW_TYPES } from "../../../../constants/product";
import Pagination from "../../../products/pagination";
import MediaQuery from "react-responsive";
import * as ProductAPI from "../../../../pages/api/brandAPI";
import * as ProductAPIS from "../../../../pages/api/products";
import { Spin } from "antd";
import axios from "axios";
import styles from "./listProductByBrand.module.scss";
import Footer from "../../footer/Footer";
import classNames from "classnames";

const listProductByBrand: FC<any> = (props) => {
  const [isDataLoading, setIsDataLoading] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [viewType, setViewType] = useState(VIEW_TYPES.GRID);
  const [filterVisible, setFilterVisible] = useState(false);
  const [activeFilterConditions, setActiveFilterConditions] = useState({});
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);
  const [products, setProducts] = useState<any>({ data: {}, meta: {} });
  const [productsES, setProductES] = useState<any>({ hits: {  total: { value: 0},hits: [] }});
  // const [productsES, setProductES] = useState<any>();
  const router = useRouter();
  const [breadCrumbData, setBreadCrumbData] = useState("");
  const refreshData = () => router.replace(router.asPath);
  let activeFilter = {};let activeFilterES = {};
  let brandid: any = "";
  useEffect(() => {
    setIsDataLoading(true);
    brandid = router?.query?.brandId;

    activeFilter = {
      category_id: 1,
      page: 1,
      limit: 30,
      brand: brandid,
    };
    activeFilterES = {    
     q: {"query": { "query_string": { "query": "*" } }},
     index: 'product_details'
   };

   

    fetchProducts(activeFilter);
    setActiveFilterConditions(activeFilter);
    fetchProductsES(activeFilterES);
  }, [router]);

  const onViewTypeChange = (viewType: string) => {
    setViewType(viewType);
  };

  const toggleFilterVisible = () => {
    setFilterVisible(!filterVisible);
  };

  const fetchProducts = async (payload: any) => {
    if (payload.second_name) {
      activeFilter = {
        category_id: 1,
        page: 1,
        limit: 30,
        brand: brandid,
        second_name: payload.second_name,
      };
    } else {
      activeFilter = {
        category_id: 1,
        page: 1,
        limit: 30,
        brand: brandid,
      };
    }

    payload = activeFilter;

    await axios
      .get(ProductAPIS.fetchProductsList, { params: { ...payload } })
      .then((res) => {
        
        setProducts(res.data);
        setIsDataLoading(false);
      });
  };

  const fetchProductsES = async (payload: any) => {

    payload = activeFilterES;

    await axios
      .get(ProductAPIS.fetchProductsListES, { params: { ...payload } })
      .then((res) => {
        console.log(res)
        if(res?.data){
          const _response = res.data;
          if(_response.hits && _response && _response){
            setProductES( _response);
          }
        }
        // setProductES(res);
        setIsDataLoading(false);
      });
  };

  return (
    <>
      {isDataLoading ? (
        <div
          style={{
            width: "100%",
            height: "100vh",
            left: "50%",
            top: "50%",
            position: "absolute",
          }}
        >
          <Spin />
        </div>
      ) : (
        <div>
          <>
            <MediaQuery maxWidth={768}>
              <div className={styles.productHeaderContainer}>
                <ProductHeader
                  setViewType={onViewTypeChange}
                  productInfo={products.meta}
                  activeFilters={activeFilterConditions}
                  fetchProducts={fetchProducts}
                  breadCrumbData={breadCrumbData}
                  setActiveFilters={(data: any) =>
                    setActiveFilterConditions(data)
                  }
                  productHeaderTitle={props.productHeaderTitle}
                />
              </div>

              <ProductFilters
                toggleFilterVisible={toggleFilterVisible}
                fetchProducts={fetchProducts}
                filterVisible={filterVisible}
                activeFilters={activeFilterConditions}
                setActiveFilters={(data: any) =>
                  setActiveFilterConditions(data)
                }
              />
              {!filterVisible && (
                <ProductsList
                  products={products.data || []}
                  viewType={viewType}
                />
              )}
            </MediaQuery>

            <MediaQuery minWidth={769}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                }}
              >
                <div className={styles.filterContainer}>
                  <ProductFilters
                    fetchProducts={fetchProducts}
                    activeFilters={activeFilterConditions}
                    setActiveFilters={(data: any) =>
                      setActiveFilterConditions(data)
                    }
                  />
                </div>
                <div
                  className="flex"
                  style={{ width: "75%", marginLeft: "2em" }}
                >
                  <div className="w-full">
                    <ProductHeader
                      setViewType={onViewTypeChange}
                      viewType={viewType}
                      productInfo={products.meta}
                      activeFilters={activeFilterConditions}
                      fetchProducts={fetchProducts}
                      breadCrumbData={breadCrumbData}
                      setActiveFilters={(data: any) =>
                        setActiveFilterConditions(data)
                      }
                      productHeaderTitle={props.productHeaderTitle}
                    />
                    <ProductsList
                      products={products.data || []}
                      viewType={viewType}
                    />
                    <Pagination
                      listMetaData={products.meta || {}}
                      fetchProducts={fetchProducts}
                      activeFilters={activeFilterConditions}
                      setActiveFilters={(data: any) =>
                        setActiveFilterConditions(data)
                      }
                    />
                  </div>
                </div>
              </div>
              <Footer />
            </MediaQuery>
          </>
        </div>
      )}
    </>
  );
};

export default listProductByBrand;