import {buildShopParamsGET, findQueryParamsValue, getShopSortList, SortType} from "../../libs/utils";
import BlogPagination from "../blog-pagination/blog-pagination";
import {useRouter} from "next/router";

/* eslint-disable-next-line */
export interface ShopCatalogProps {
}

export function ShopCatalog({
                              queries = [],
                              products = [],
                              paginator = {pagination: {}}
                            }) {
  const router = useRouter();

  const sortCatalog = (event) => {
    const value = event.target.value;
    router.push(`${router.pathname}${buildShopParamsGET(
      value as SortType,
      findQueryParamsValue(queries, 'page'),
      findQueryParamsValue(queries, 'range'),
      findQueryParamsValue(queries, 'cat'),
      findQueryParamsValue(queries, 'filters'),
      findQueryParamsValue(queries, 'search')
    )}`);
  }

  return (
    <>
      <header className="flex flex-col items-end w-full">
        <div className="max-w-[300px] text-right">
          <select id="countries"
                  value={findQueryParamsValue(queries, 'sort')}
                  onChange={sortCatalog}
                  className="border text-sm rounded-lg block w-full p-2.5
                          bg-white border-gray-300 text-gray-900
                          focus:ring-blue-500 focus:border-blue-500
                          dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">

            {getShopSortList().map((val, index: number) => (
              <option key={'sort-' + index}
                      value={val.value}>{val.label}</option>))}
          </select>
        </div>
      </header>
      <hr className="border-gray-200 dark:border-gray-700 w-full mt-3 mb-5" />
      <main>
        {products && products.length === 0 && (<p>Il n'y aucun produit pour l'instant</p>)}
        {products && products.length > 0 && (<p>Produit</p>)}
      </main>
      <footer className="mt-10">
        <BlogPagination paginator={paginator} />
      </footer>
    </>
  );
}

export default ShopCatalog;