import axios from "axios";
import Header from "../../components/Header";
import Layout from "../../components/Layout";
import Pagination from "../../components/Pagination";
import ProductCard from "../../components/ProductCard";
import FilterIcon from "../../icons/filter.svg";
import { useEffect, useState } from "react";
import Filter from "../../components/Filter";
import { useRouter } from "next/router";

export async function getServerSideProps(context) {
  const { q, page = 1,  brand = '', category = '' } = context.query;
  let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&page=${page}&brand=${brand}&category=${category}`);
  searchResults = searchResults.data;
  return { props: { searchResults, q, page, brand, category } };
}

export default function ShopSearch({ searchResults, q, page, brand, category }) {
  const router = useRouter();

  const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
  const productStart = searchResults.responseHeader.params.start;
  const productRows = searchResults.responseHeader.params.rows;
  const productFound = searchResults.response.numFound;

  const [activeFilter, setActiveFilter] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState(category);
  const [selectedBrand, setSelectedBrand] = useState(brand);
  const [categories, setCategories] = useState([]);
  const [brands, setBrands] = useState([]);

  const filterSubmit = (e) => {
    e.preventDefault();
    setActiveFilter(false);
    let filterRoute = `/shop/search?q=${q}`;
    if (selectedBrand) filterRoute += `&brand=${selectedBrand}`;
    if (selectedCategory) filterRoute += `&category=${selectedCategory}`;
    router.push(filterRoute, undefined, { scroll: false });
  }

  useEffect(() => {
    const filterCategory = searchResults.facet_counts.facet_fields.category_name_str.filter((category, index) => {
      if (index % 2 == 0) {
        const productCountInCategory = searchResults.facet_counts.facet_fields.category_name_str[index + 1];
        if (productCountInCategory > 0) return category;
      }
    });
    setCategories(filterCategory);

    const filterBrand = searchResults.facet_counts.facet_fields.brand_str.filter((brand, index) => {
      if (index % 2 == 0) {
        const productCountInBrand = searchResults.facet_counts.facet_fields.brand_str[index + 1];
        if (productCountInBrand > 0) return brand;
      }
    });
    setBrands(filterBrand);
  }, [searchResults]);
  return (
    <>
      <Header title={`Jual ${q} - Indoteknik`} />
      <Filter 
        selectedBrand={selectedBrand}
        onChangeBrand={(e) => setSelectedBrand(e.target.value)}
        selectedCategory={selectedCategory}
        onChangeCategory={(e) => setSelectedCategory(e.target.value)}
        brands={brands}
        categories={categories}
        isActiveFilter={activeFilter} 
        closeFilter={() => setActiveFilter(false)} 
        onSubmit={filterSubmit}
      />
      <Layout>
        <div className="p-4">
          <button className="btn-light py-2 flex items-center gap-x-2 mb-2" onClick={() => setActiveFilter(true)}>
            <FilterIcon className="w-4 h-4" /> <span>Filter</span>
          </button>
          <h1>Produk</h1>
          <div className="text-sm mb-4">
            {productFound > 0 ? (
              <>
                Menampilkan&nbsp;
                {pageCount > 1 ? (
                  <>
                    {productStart + 1}-{
                      (productStart + productRows) > productFound ? productFound : productStart + productRows
                    }
                    &nbsp;dari&nbsp;
                  </>
                ) : ''}
                {searchResults.response.numFound}
                &nbsp;produk untuk pencarian <span className="font-semibold">{q}</span>
              </>
            ) : 'Mungkin yang anda cari'}
          </div>
          <div className="grid grid-cols-2 gap-3">
            {searchResults.response.products.map((product) => (
              <ProductCard key={product.id} data={product} />
            ))}
          </div>
          
          <div className="mt-4">
            <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={`/shop/search?q=${q}`} />
          </div>
        </div>
      </Layout>
    </>
  )
}