import React, { useState, FC, useEffect } from "react";
import { useRouter } from "next/router";
import cx from "classnames";
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 ProductAPIS from "../../../pages/api/products";
import { AutoComplete, Input, Spin } from "antd";
import axios from "axios";
import styles from "./sellerFindByBrand.module.scss";
import Footer from "../../home/footer/Footer";
import { SearchOutlined } from "@ant-design/icons";
import * as SearchAPI from "../../../pages/api/search";

const sellerProductsByBrands: 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 [searchTerm, setSearchTerm] = useState();
  const [src, setSrc] = useState("");
  const [autoComplete, setAutoComplete] = useState([]);
  const router = useRouter();
  const [breadCrumbData, setBreadCrumbData] = useState("");
  const refreshData = () => router.replace(router.asPath);
  const [brandName, setBrandName] = useState<any>();
  const [sellerid, SetSellerId] = useState<any>();

  let activeFilter = {};

  useEffect(() => {
    setIsDataLoading(true);
    const sellerid = router?.query?.sellerid;
    const brandId = router?.query?.brandId;
    activeFilter = {
      category_id: 1,
      page: 1,
      limit: 30,
      vendor_id: sellerid,
      brand: brandId,
    };

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

  useEffect(() => {
    const Name = router?.query?.brand;
    const sellerId = router?.query?.sellerid;

    if (props.sellerData.logo && props.sellerData.logo.length) {
      const logoLink = JSON.parse(props.sellerData.logo)?.[0]?.url;
      setSrc(`${logoLink}`);
    }

    if (Name) {
      setBrandName(Name);
      SetSellerId(sellerId);
    }
  }, [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,
        vendor_id: router?.query?.sellerid,
        brand: router?.query?.brandId,
        second_name: payload.second_name,
      };
    } else {
      activeFilter = {
        category_id: 1,
        page: 1,
        limit: 30,
        vendor_id: router?.query?.sellerid,
        brand: router?.query?.brandId,
      };
    }

    payload = activeFilter;
    setActiveFilterConditions(activeFilter);

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

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

  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 searchHandler = () => {
    if (searchTerm)
      router.push({
        pathname: `/seller/products/${1}`,
        query: {
          search: searchTerm,
          sellerid: router?.query?.sellerid,
        },
      });
  };

  return (
    <>
      {isDataLoading ? (
        <div
          style={{
            maxWidth: "100%",
            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}>
                  <div className={styles.sellerDetailsContainer}>
                    {props.sellerData.logo ? (
                      <img src={src} alt="logo" className={styles.sellerLogo} onClick={backToHome}/>
                    ) : (
                      <></>
                    )}
                    <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.ProductfilterContainer}>
                    <ProductFilters
                      fetchProducts={fetchProducts}
                      activeFilters={activeFilterConditions}
                      setActiveFilters={(data: any) =>
                        setActiveFilterConditions(data)
                      }
                    />
                  </div>
                </div>

                <div
                  className="flex"
                  style={{ width: "75%", marginLeft: "2em" }}
                >
                  <div className="w-full">
                    <div
                      className={cx(
                        "container my-10",
                        styles.sellerProductBrands
                      )}
                      id="SellerProductBrands"
                    >
                      <div className={styles.title_container}>
                        <img
                          className={styles.find_brands_img}
                          src={`/images/brands/brand-Img/IMG-${brandName}.png`}
                          alt={"brand-IMG"}
                        />

                        <div className={styles.brandTitle}> {brandName}</div>
                        <div className={styles.backToHome}>
                          <a onClick={backToHome}>{"Back to Home"}</a>
                        </div>
                      </div>
                    </div>

                    <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 sellerProductsByBrands;