import React, { useState, FC, useEffect } from "react";
import styles from "./sellerDetails.module.scss";
import { LeftOutlined, SearchOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import * as ProductAPI from "../../../pages/api/sellerHomePageApi";
import * as SearchAPI from "../../../pages/api/search";
import { Input, AutoComplete } from "antd";
import axios from "axios";
import Link from "next/link";
import SEOHead from "../../SEOHead";
import { description, image, url } from "../../../mockData/seoConstants";

const sellerDetailsMobile: FC<any> = (props) => {
  const router = useRouter();
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [searchText, setSearchText] = useState("");
  const [isDataLoading, setIsDataLoading] = useState(false);
  const [products, setProducts] = useState<any>({ data: {}, meta: {} });
  const [activeFilterConditions, setActiveFilterConditions] = useState({});
  const [showFilter, setShowFilter] = useState(true);
  const [src, setSrc] = useState("");
  const [searchTerm, setSearchTerm] = useState();
  const [autoComplete, setAutoComplete] = useState([]);
  const sellerName = props.sellerData.shop_title;
  console.log(props);
  useEffect(() => {
    setShowFilter(props.showFilter);

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

    setIsDataLoading(true);
    const activeFilter = {
      category_id: 1,
      page: 1,
      limit: 30,
    };
    setActiveFilterConditions(activeFilter);
  }, []);

  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 (
    <>
      <SEOHead
        title={props.sellerData.shop_title}
        description={description}
        url={`${url}/seller/homePage/${router?.query?.sellerid}`} 
        image={src||image}
      />
    <div className={styles.detailsContainerMobile}>
      <div className={styles.breadcrumbMobile}>
        {router?.query?.brand || router?.query?.name || router?.query?.search ? (
          <Link
            href={{
              pathname: `/seller/homePage/${router?.query?.sellerid}`,
              query: { sellerid: router?.query?.sellerid },
            }}
          >
            <LeftOutlined className={styles.iconLeftDisplay} />
          </Link>
        ) : (
          <></>
        )}
        <div className={styles.sellerNameLogoMobile}>
        {props.sellerData.logo ? <img src={src} alt="logo" className={styles.sellerLogo} />:<></>}
          <div className={styles.sellerNameMobile}>
            {props.sellerData.shop_title}
          </div>
        </div>
      </div>
      <div className={styles.searchbox}>
        <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
            className={styles.filterSearch}
            suffix={
              <SearchOutlined
                onClick={searchHandler}
                className={styles.sellerSearchButton}
              />
            }
            size={"middle"}
          />
        </AutoComplete>
      </div>
      </div>
      </>

  );
};

export default sellerDetailsMobile;