import axios from "axios";
import Link from "next/link";
import { useEffect, useState } from "react";
import Header from "../../components/Header";
import ProductCard from "../../components/ProductCard";

export async function getServerSideProps(context) {
  const { q, page = 1 } = context.query;
  let searchResults = await axios(`http://${context.req.headers.host}/api/shop/search?q=${q}&page=${page}`);
  searchResults = searchResults.data;
  return { props: { searchResults, q } };
}

export default function ShopSearch({ searchResults, q, page = 1 }) {
  const pageTotal = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);

  return (
    <>
      <Header title={`Jual ${q} - Indoteknik`} />
      <main>
        <div className="p-4">
          <h1 className="mb-1">Produk</h1>
          <div className="text-xs mb-4">
            Menampilkan&nbsp;
            {searchResults.responseHeader.params.start + 1}-{searchResults.responseHeader.params.start + searchResults.responseHeader.params.rows}
            &nbsp;dari&nbsp;
            {searchResults.response.numFound}
            &nbsp;produk untuk pencarian {q}
          </div>
          <div className="grid grid-cols-2 gap-3">
            {searchResults.response.products.map((product) => (
              <ProductCard key={product.id} data={product} />
            ))}
          </div>
          <div className="flex justify-center gap-x-1 mt-4">
            {[...Array(pageTotal)].map((v, i) => (
              <Link href={`/shop/search?q=${q}&page=${i+1}`} key={i} className={"p-1 px-2 rounded ease-linear duration-150 " + (page == (i + 1) ? "bg-yellow-900 text-white" : "bg-gray-100 hover:bg-gray-300 text-gray-900")}>
                {i + 1}
              </Link>
            ))}
          </div>
        </div>
      </main>
    </>
  )
}