import { useRouter } from "next/router";
import { FC, useEffect, useState } from "react";
import { baseUrl, defaultImg } from "../../constants/urls";
import styles from "./brandsContainer.module.scss";
import { Input } from "antd";
import cx from "classnames";
import {
  SearchOutlined
} from "@ant-design/icons";

const BrandsContainer: FC<any> = ({ brandsData }) => {
  const router = useRouter();
  const [brandsList, setBrandsList] = useState([]);
  const [newBrandsList, setNewBrandsList] = useState([]);
  const [value, setValue] = useState("");
  const findByBrandName = (brandId: any, brandName: any, brandLogo: any, category_id: any) => {

    router.push({
      pathname: `/products/${category_id}`,
      query: {
        brand: brandName,
        brandId: brandId,
        url: brandLogo,
      },
    });
  };


  useEffect(() => {
    setBrandsList(brandsData);
    setNewBrandsList(brandsData);
  }, [brandsData])



  return (
    <>
      <div className="container">
        <div className="flex justify-around">
          <h2 className={cx("ant-col-xl-20 ant-col-xs-16", styles.sectionSubTitle)}><span className={styles.subtitleSpan}>Brands</span></h2>
          <div className={cx("ant-col-xl-4 ant-col-xs-8 cursor-pointer ", styles.sectionSubTitle)} ><Input
            value={value}
            placeholder="Search "
            className={styles.textInput}
            allowClear={true}
            suffix={<SearchOutlined />}
            size={"middle"}
            onKeyDown={(event: any) => {

              if (event.keyCode == 8) {
                setBrandsList(newBrandsList);
              }
            }}
            onChange={(e) => {
              if (e.target.value === "") {
                setBrandsList(newBrandsList);
                setValue("");
              } else {
                const currValue = e.target.value.toLowerCase();
                setValue(currValue);
                const filteredData = brandsList.filter((entry: any) => {
                  const name = entry?.brand_name.toLowerCase();
                  return name.includes(currValue);
                });
                setBrandsList(filteredData);
              }
            }}
          /></div>
        </div>

        <div className={styles.brandContainer}>
          {brandsList?.map((brnd: any, idx: number) => {
            return (
              <div key={idx}>
                <div className={styles.card} onClick={() => {
                  findByBrandName(
                    brnd.id,
                    brnd.brand_name,
                    brnd.brand_logo,
                    brnd.category_id
                  );
                }}><img
                    className={styles.img}
                    src={
                      brnd.brand_logo == null || brnd.brand_logo == ""
                        ? `${defaultImg}`
                        : `${baseUrl}/${brnd.brand_logo}`
                    }
                    alt={`${brnd.brand_name}`}
                  /></div>
              </div>
            )
          })

          }
        </div>
      </div>
    </>
  )
}
export default BrandsContainer;