import React, { FC, useContext, useEffect, useState } from "react";
import Router, { useRouter } from "next/router";
import cx from "classnames";
import MediaQuery from "react-responsive";
import { Spin } from "antd";
import get from "lodash/get";

import FilterComponent from "./FilterComponent";
import PriceRangeFilter from "./PriceRangeFilter";
import CategoryFiltersES from "./CategoryFiltersES";
import MobileFilters from "./MobileFilters";

import { fetchAttributesES,fetchCatgoriesES } from "../../../pages/api/categories";

import styles from "./filters.module.scss";
import BrandFilters from "./BrandFilters";
import MobileFilterSearch from "./MobileFilterSearch";
import shopConetxt from "../../../context/shopConetxt";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";

const Filters: FC<any> = ({
  fetchProducts,
  productsES,
  toggleFilterVisible,
  filterVisible,
  categoryRoutId,
  activeFilters,
  setActiveFilters,
  catID,
  type,
  imageUrl
}) => {
  const router: any = useRouter();
  let initLoad = true;
  const { categoryTreeNested, setCategoryBreadcrumb } =
  useContext(shopConetxt);
  const [seachVisible, setSeachVisible] = useState(false);
  const [handleSelectionEventType, setHandleSelectionEventType] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<number>(0);
  const [categoriesES, setESCategories] = useState([]);
  const [brandsES, setESBrands] = useState([]);
  const [priceFilterMaxrange, setPriceFilterMaxrange] = useState(1000);
  const [flatCategories, setFlatCategories] = useState([]);
  const [genericFilters, setGenericFilters] = useState({
    categories: [],
    brand: [],
  });
  const [filterData, setFilterData] = useState([]);
  const [path,setPath] = useState("")
  useEffect(() => {
   if(initLoad){
    initLoad = false;
   
   
    if (router.query && router.query.id) {
      setSelectedCategory(router.query.id);
      if (router.query.id !== "All") {
        setActiveFilters({ ...activeFilters, category_id: router.query.id });
      }
    } else {
      setSelectedCategory(catID);
      setActiveFilters({ ...activeFilters, category_id: catID });
    }
    }
  }, [router]);

  const getCatCount = (id:any) => {
    const _id:number = +id;
    if(productsES && productsES.countsList && productsES.countsList.category_ids && productsES.countsList.category_ids[_id]){
      return productsES.countsList.category_ids[_id];
    }
    return 0;
  }
  const getBrandCount = (id:any) => {
    const _id:number = +id;
    if(productsES && productsES.countsList && productsES.countsList.brands && productsES.countsList.brands[_id]){
      return productsES.countsList.brands[_id];
    }
    return 0;
  }
  const getAttrCount = (id:any) => {
    if(productsES && productsES.countsList && productsES.countsList.attributes && productsES.countsList.attributes[id]){
      return productsES.countsList.attributes[id];
    }
    return 0;
  }

  const list_to_tree = (list:any) => {
   
    let map:any = {}, node, roots:any = [], i;
    
    for (i = 0; i < list.length; i += 1) {
      map[list[i]?.id] = i; // initialize the map
      list[i].children = []; // initialize the children
      list[i]._count = getCatCount(list[i]?.id);
      if(list[i]._count > 0){
      list[i].name = list[i]?.name+ " (" +list[i]?._count+ ")";
      }else{
        list[i].name=null;
      }
    }
    
    for (i = 0; i < list.length; i += 1) {
     
      node = list[i];
      if (node.parent_id != 1) {
        
        list[map[node.parent_id]]?.children.push(node);
      } else {
        
        if(node._count>0 ){
       
          roots.push(node);
        }
      }
    }
    return roots;
  }

  useEffect(() => {
    if(productsES.countsList)
    setPriceFilterMaxrange(productsES.countsList.maxprice);
    
    const _activeFilterES = {
      q: {
        from: 1,
        size: 5000,
        "query": { "query_string": { "query": "*" } }
     },
      index: "categories_index",
    };
    
   // if(path!==router.pathname){
    fetchCatgoriesES(_activeFilterES).then((res: any) => {
      const _cData:any = [];
      const contVal = res.hits.hits ;
      for (const category of contVal){
        _cData.push(category?._source);
      }
      setFlatCategories(_cData);
      const _ttt = list_to_tree(_cData);
      setESCategories(_ttt);
    });
  // }
    _activeFilterES.index = "attributes_index";
    fetchAttributesES(_activeFilterES).then((res: any) => {
      //setTimeout(() => {
        const _attr = res.hits.hits;
        if(handleSelectionEventType != 'brand'){
          const _attr_ = _attr.filter((attr:any)=>{
            return attr._source.code == 'brand';
          });
          if(_attr_.length > 0){
            const _ids:any = [];
            const _attribute_opts = (_attr_[0]._source.attribute_opts).split(",");
            const _attribute_values = (_attr_[0]._source.attribute_values).split(",");
            for(let i = 0; i<_attribute_opts.length;i++){
              if(_attribute_opts[i] != ''){
                if(getBrandCount(_attribute_values[i]) > 0){
                  const _obj = {
                    brand:_attribute_values[i],
                    brand_label: _attribute_opts[i] + " (" +getBrandCount(_attribute_values[i]) + ")"
                  }
                  _ids.push(_obj);
                }
               
              }
            }
            setESBrands(_ids);
          }
        }
  
        const _attr_Ex = _attr.filter((attr:any)=>{
          return attr._source.code != 'brand';
        });
        
        if(_attr_Ex.length > 0){
          const _filtersRoot:any = [];
          for(const _attr_Ex_ of _attr_Ex){          
            const _category_ids = (_attr_Ex_._source.category_id).split(",");
            if(_attr_Ex_._source.attribute_opts && _category_ids.indexOf(categoryRoutId) > -1){
              const _attribute_opts = (_attr_Ex_._source.attribute_opts).split(",");
              const _attribute_values = (_attr_Ex_._source.attribute_values).split(",");
              const _ids:any = [];
              for(let i = 0; i<_attribute_opts.length;i++){
                if(_attribute_opts[i] != ''){
                  // console.log(_attr_Ex_._source.code+"_"+_attribute_values[i],getAttrCount(_attr_Ex_._source.code+"_"+_attribute_opts[i]))
                  if(getAttrCount(_attr_Ex_._source.code+"_"+_attribute_values[i]) > 0){
                    const _obj = {
                      id:_attribute_values[i],
                      label:_attribute_opts[i] + " (" +getAttrCount(_attr_Ex_._source.code+"_"+_attribute_values[i]) + ")"
                    }
                    _ids.push(_obj);
                  }
                }
              }
              if(_ids.length > 0) {
                const _obj = {
                  ..._attr_Ex_._source,
                  "options": _ids,
                }
                if(handleSelectionEventType == 'attr_'+_attr_Ex_._source.code){
                  const _selectedAttr:any = filterData.find((itm:any) => {
                    return itm.code == _attr_Ex_._source.code;
                  })  
                  _obj.options = _selectedAttr.options;
                }
             
                _filtersRoot.push(_obj);
              }           
            }         
          }
          setFilterData(_filtersRoot);
        }
    });
  
  }, [productsES]);

  const toggleSearchVisible = () => {
    setSeachVisible(!seachVisible);
  };
  
  const handleCategorySelection = (categoryId: any,categoryName:string,files:any) => {
    

    const flattenCategory = getFlattenCategory(categoryTreeNested);
    const breadCrumbData = createBreadcrumb(categoryId, flattenCategory);
      setCategoryBreadcrumb(breadCrumbData);
     if(files.children.length>0){
       if(type){
       
        const flattenCategory = getFlattenCategory(categoryTreeNested);
        const breadCrumbData = createBreadcrumb(categoryId, flattenCategory);
          setCategoryBreadcrumb(breadCrumbData);
        activeFilters.category_ids = categoryId;
        fetchProducts({ ...activeFilters });
       }else{
        const flattenCategory = getFlattenCategory(categoryTreeNested);
        const breadCrumbData = createBreadcrumb(categoryId, flattenCategory);
          setCategoryBreadcrumb(breadCrumbData);
    const routerObject: any = { ...router.query };
    routerObject.id = categoryId;
    routerObject.cateName = categoryName;
    const result = "?" + new URLSearchParams(routerObject).toString();
    Router.push(`/categories/${categoryId}${result}`);
       }
    }else{
      
      const routerObject: any = { ...router.query };
       routerObject.id = categoryId;
      routerObject.cateName = categoryName;
      activeFilters.category_ids = categoryId;
      fetchProducts({ ...activeFilters });
      const flattenCategory = getFlattenCategory(categoryTreeNested);
      const breadCrumbData = createBreadcrumb(categoryId, flattenCategory);
      setCategoryBreadcrumb(breadCrumbData);
      const result = "?" + new URLSearchParams(routerObject).toString();
      router.reload(`/products/${categoryId}${result}`);
    }
   
  };

  const handleSelectionEvent = (type:string) =>{
      setHandleSelectionEventType(type);
  }

  return (
    <>
      <MediaQuery minWidth={769}>
        <div className={styles.filtersWrapper}>
          <div className={cx(styles.filterHeader, "mb-8")}>Filters</div>
          <>
            <CategoryFiltersES
              categoryFilters={categoriesES || []}
              fetchProducts={fetchProducts}
              activeFilters={activeFilters}
              selectedCategory={selectedCategory}
              setActiveFilters={setActiveFilters}
              flatCategories={flatCategories}
              handleCategorySelection={handleCategorySelection}
              type={type}
            />
            <BrandFilters
            imageUrl={imageUrl}
              brandFilterOptions={brandsES || []}
              fetchProducts={fetchProducts}
              activeFilters={activeFilters}
              setActiveFilters={setActiveFilters}
              handleSelectionEvent={handleSelectionEvent}
            />
            <PriceRangeFilter
              maxPrice={Math.round(get(genericFilters, "max-price", priceFilterMaxrange))}
              fetchProducts={fetchProducts}
              activeFilters={activeFilters}
              setActiveFilters={setActiveFilters}
              productsES={productsES}
              handleSelectionEvent={handleSelectionEvent}
            />
          </>

          {filterData ? (
            filterData.map((filters: { id: number }) => (
              <FilterComponent
                key={filters.id}
                filters={filters}
                fetchProducts={fetchProducts}
                activeFilters={activeFilters}
                setActiveFilters={setActiveFilters}
                handleSelectionEvent={handleSelectionEvent}
              />
            ))
          ) : (
            <Spin />
          )}
        </div>
      </MediaQuery>
      <MediaQuery maxWidth={768}>
        <MobileFilterSearch
          seachVisible={seachVisible}
          toggleFilterVisible={toggleFilterVisible}
          toggleSearchVisible={toggleSearchVisible}
          activeFilters={activeFilters}
          setActiveFilters={setActiveFilters}
          fetchProducts={fetchProducts}
          brandData={brandsES || []}
        />
       
        {filterVisible && (
          <MobileFilters
            filterData={filterData}
            fetchProducts={fetchProducts}
            onClose={toggleFilterVisible}
            activeFilters={activeFilters}
            setActiveFilters={setActiveFilters}
            maxPrice={priceFilterMaxrange}
            brandData={brandsES || []}
          />
        )}
      </MediaQuery>
    </>
  );
};

export default Filters;