import { LazyLoadImage } from "react-lazy-load-image-component";
import Header from "../../components/Header";
import apiOdoo from "../../helpers/apiOdoo";
import "react-lazy-load-image-component/src/effects/blur.css";
import Link from "next/link";
import { createSlug } from "../../helpers/slug";
import InfiniteScroll from "react-infinite-scroll-component";
import { useState } from "react";
import Spinner from "../../components/Spinner";

export async function getServerSideProps() {
  let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
  return {props: {initialManufactures}};
}

export default function Brands({ initialManufactures }) {
  const [manufactures, setManufactures] = useState(initialManufactures.manufactures);
  const [hasMoreManufacture, setHasMoreManufacture] = useState(true);

  const getMoreManufactures = async () => {
    const result = await apiOdoo('GET', `/api/v1/manufacture?limit=31&offset=${manufactures.length}`);
    if (manufactures.length + 30 >= result.manufacture_total) setHasMoreManufacture(false);
    setManufactures((manufactures) => [...manufactures, ...result.manufactures]);
  };
  return (
    <>
      <Header title='Semua Brand di Indoteknik' />
      <main className="p-4">
        <h1>Semua Brand di Indoteknik</h1>
        <InfiniteScroll
          dataLength={manufactures.length}
          next={getMoreManufactures}
          hasMore={hasMoreManufacture}
          className="grid grid-cols-3 gap-4 mt-4 !overflow-x-hidden"
          loader={
            <div className="flex justify-center items-center border border-gray-300 p-1 rounded h-14">
              <Spinner className="w-6 h-6 text-gray-600 fill-gray-900"/>
            </div>
          }
        >
          {manufactures?.map((manufacture, index) => (
            manufacture.name ? (
              <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-16 text-gray-800 text-sm text-center bg-white" key={index}>
                {manufacture.logo ? (
                  <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name || ''} className="w-full max-h-full object-contain object-center" />
                ) : manufacture.name}
              </Link>
            ) : ''
          ))}
        </InfiniteScroll>
      </main>
    </>
  )
}