import React, { useState, FC, useEffect } from "react";
import { useRouter } from "next/router";
import ProductHeader from "../../../products/productHeader";
import ProductsList from "../../../products/productsList";
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 { AutoComplete, Breadcrumb, Input, Spin } from "antd";
import axios from "axios";
import styles from "./sellerProducts.module.scss";
import Footer from "../../../home/footer/Footer";
import SellerDetails from "../../sellerDetails/sellerDetails";
import { SearchOutlined } from "@ant-design/icons";
import * as SearchAPI from "../../../../pages/api/search";
import { isArray } from "lodash";
import ProductsListES from "../../../products/productsList/ProductsListES";

const sellerProducts: 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 [searchText, setSearchText] = 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 [searchTerm, setSearchTerm] = useState();
  const [src, setSrc] = useState("");
  const [autoComplete, setAutoComplete] = useState([]);
  const router = useRouter();
  const [breadCrumbData, setBreadCrumbData] = useState("");
  const refreshData = () => router.replace(router.asPath);
  let activeFilter = {};
  const [state, setState] = useState({
		isRouteChanging: false,
		loadingKey: 0,
	  })

  useEffect(() => {
    setIsDataLoading(true);
    const categoryid =props?.type?props?.catogoryId:router?.query?.id ;
    const sellerid = props?.type?props?.sellerId:router?.query?.sellerid;
    const searchParams = props?.type?props?.search:router?.query?.search;
    let activeFilterES:any = {};
    activeFilterES = {
      "from": 1,
      "size": 30,
      "query": {
        "bool": {
          "must": [],
          "filter": []
        }
      }
    }
    if(categoryid != 'All' && categoryid != 'ALL' && categoryid != '' && categoryid != undefined){        
      activeFilterES.query.bool.filter.push({
        "term" : { "category_ids" : "*"+categoryid+",*" }
      })
    }
    if(searchParams != '' && searchParams != undefined){      
      activeFilterES.query.bool.must.push({
        "match" : { "name" : "*"+searchParams+"*" }
      })
    }
   
    if(sellerid != '' && sellerid !== undefined){        
      activeFilterES.query.bool.filter.push({
        "term" : { "vendor_id" : sellerid }
      })
    }
    const _activeFilterES = {    
      q: activeFilterES,
        index: 'product_details'
    };


    // if (searchParams) {
    //   activeFilter = {
    //     category_id: 1,
    //     name: "'" + searchParams + "'",
    //     page: 1,
    //     limit: 30,
    //     vendor_id: sellerid,
    //   };
    // } else {
    //   activeFilter = {
    //     category_id: categoryid,
    //     page: 1,
    //     limit: 30,
    //     vendor_id: sellerid,
    //   };
    // }

 

    fetchProducts(_activeFilterES);
    setActiveFilterConditions(_activeFilterES);
  }, [props?.catogoryId, props?.search]);

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

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

  const fetchProducts = async (payload: any) => {
    setIsDataLoading(true);
    let price,pay;
    if(payload?.price){
     price = isArray( payload.price)? payload.price.toString(): payload.price;
     pay = {...payload,price}
    }else{
      pay=payload;
    }
  
    const categoryid =props?.type?props?.catogoryId:router?.query?.id ;
    const sellerid = props?.type?props?.sellerId:router?.query?.sellerid;
    const searchParams = props?.type?props?.search:router?.query?.search;
    if (payload.second_name) {
      if (searchParams) {
        activeFilter = {
          category_id: categoryid,
          name: "'" + searchParams + "'",
          page: 1,
          limit: 30,
          vendor_id: categoryid,
          second_name: payload.second_name,
        };
      } else {
        activeFilter = {
          category_id: categoryid,
          page: 1,
          limit: 30,
          vendor_id:sellerid,
          second_name: payload.second_name,
        };
      }
    } else {
      if (searchParams) {
        activeFilter = {
          category_id: categoryid,
          name: "'" + searchParams + "'",
          page: 1,
          limit: 30,
          vendor_id: sellerid,
         
        };
      } else {
        activeFilter = {
          category_id: categoryid,
          page: 1,
          limit: 30,
           vendor_id: sellerid,
        };
      }
    }

    // payload=activeFilter;
    // fetchProducts(activeFilter);
    setActiveFilterConditions(activeFilter);

console.log(pay,"pay");

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

  const _searchText = (text: string) => {
    SearchAPI.fetchAutoComplete(text).then((res) => {
      const array_strng: any = [];
      res.hits.hits.forEach((element: any) => {
        const name =
          element._source.name === null
            ? element._source.product_number
            : element._source.name;
        array_strng.push(name);
      });
      setAutoComplete(array_strng);
    });
  };

  const fetchProductsES = async (payload: any) => {
    handleRouteChangeStart();
    await axios
      .get(ProductAPIS.fetchProductsListES, { params: { ...payload } })
      .then((res) => {
        if(res?.data){
          const _response = res.data;
          if(_response.hits && _response && _response){
            setProductES( _response);
          }
        }
        handleRouteChangeEnd();
      });
  }

  
  const handleRouteChangeStart = () => {
    setState((prevState) => ({
    ...prevState,
    isRouteChanging: true,
    loadingKey: prevState.loadingKey ^ 1,
    }))
  }
  const handleRouteChangeEnd = () => {
      setState((prevState) => ({
      ...prevState,
      isRouteChanging: false,
    }))
  }

  const searchHandler = () => {
    if (searchTerm)
      router.push({
        pathname: `/seller/products/${1}`,
        query: {
          search: searchTerm,
          sellerid: router?.query?.sellerid,
        },
      });
  };

  const backToHome = () => {
    router.push({
      pathname: `/seller/homePage/${router?.query?.sellerid}`,
      query: {
        sellerid: router?.query?.sellerid,
      },
    });
  };

  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)
                }
                catID={props?.catogoryId}
              />
              {!filterVisible && (
                <ProductsListES
                  products={productsES.hits.hits || []}
                  viewType={viewType}
                />
              )}
            </MediaQuery>

            <MediaQuery minWidth={769}>
              <div className="m-6 flex"
               
              >
                <ProductFilters
                      fetchProducts={fetchProducts}
                      activeFilters={activeFilterConditions}
                      setActiveFilters={(data: any) =>
                        setActiveFilterConditions(data)
                      }
                      catID={props?.catogoryId}
                    />
                {/*<div className={styles.filterContainer}>
                   <div className={styles.sellerDetailsContainer}>
                 
                    <div className={styles.sellerName} onClick={backToHome}>
                      {props.sellerData.shop_title}
                    </div>
                    <div className={styles.sellerId}>{`#${props.sellerData.code}`}</div>

                    <AutoComplete
                      value={searchTerm}
                      placeholder="Search In this Store.."
                      dataSource={autoComplete}
                      className={styles.inputBox}
                      onChange={(evt: any) => {
                        setSearchTerm(evt);
                        _searchText(evt);
                      }}
                      onKeyDown={(event: any) => {
                        if (event.keyCode === 13) {
                          searchHandler();
                        }
                      }}
                    >
                      <Input
                        name="search"
                        className={styles.filterSearch}
                        suffix={
                          <SearchOutlined
                            onClick={searchHandler}
                            className={styles.sellerSearchButton}
                          />
                        }
                        size={"middle"}
                      />
                    </AutoComplete>
                  </div> 
                  <div className={styles.filterContainer}>
                    
                  </div>
                      </div>*/}
                
                  <div className="w-full">
                    {/* <Breadcrumb separator=">">
                      <Breadcrumb.Item>
                        <a onClick={backToHome}>Home</a>
                      </Breadcrumb.Item>
                      <Breadcrumb.Item>{props.productHeaderTitle || router?.query?.search}</Breadcrumb.Item>
                    </Breadcrumb> */}
                    <ProductHeader
                      setViewType={onViewTypeChange}
                      viewType={viewType}
                      productInfo={products.meta}
                      activeFilters={activeFilterConditions}
                      fetchProducts={fetchProducts}
                      breadCrumbData={breadCrumbData}
                      setActiveFilters={(data: any) =>
                        setActiveFilterConditions(data)
                      }
                      productHeaderTitle={props.productHeaderTitle}
                    />

                    <ProductsListES
                      products={productsES.hits.hits || []}
                      viewType={viewType}
                    />
                    <Pagination
                      listMetaData={products.meta || {}}
                      fetchProducts={fetchProducts}
                      activeFilters={activeFilterConditions}
                      setActiveFilters={(data: any) =>
                        setActiveFilterConditions(data)
                      }
                    />
                  </div>
                
              </div>
              <Footer />
            </MediaQuery>
          </>
        </div>
      )}
    </>
  );
};

export default sellerProducts;