import Header from "../../components/Header";
import apiOdoo from "../../helpers/apiOdoo";
import InfiniteScroll from "react-infinite-scroll-component";
import { useEffect, useState } from "react";
import Spinner from "../../components/Spinner";
import Layout from "../../components/Layout";
import ManufactureCard from "../../components/ManufactureCard";

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 [manufactureStartwith, setManufactureStartWith] = useState('');

  const alpha = Array.from(Array(26)).map((e, i) => i + 65);
  const alphabets = alpha.map((x) => String.fromCharCode(x));

  const getMoreManufactures = async () => {
    const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : '';
    const result = await apiOdoo('GET', `/api/v1/manufacture?limit=30&offset=${manufactures.length}&name=${name}`);
    setHasMoreManufacture(manufactures.length + 30 < result.manufacture_total)
    setManufactures((manufactures) => [...manufactures, ...result.manufactures]);
  };

  const filterManufactureStartWith = (character) => {
    setManufactures([]);
    if (manufactureStartwith == character) {
      setManufactureStartWith('');
    } else {
      setManufactureStartWith(character);
    }
  };

  useEffect(() => {
    getMoreManufactures();
  }, [manufactureStartwith]);

  return (
    <>
      <Header title='Semua Brand di Indoteknik' />
      <Layout>
        <div className="p-4">
          <h1>Semua Brand di Indoteknik</h1>
          <div className="flex overflow-x-auto gap-x-2 py-2">
            {alphabets.map((alphabet, index) => (
              <button key={index} className={"p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' bg-yellow_r-9 border-yellow_r-9 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
                {alphabet}
              </button>
            ))}
          </div>
          <InfiniteScroll
            dataLength={manufactures.length}
            next={getMoreManufactures}
            hasMore={hasMoreManufacture}
            className="grid grid-cols-4 gap-4 mt-6 !overflow-x-hidden"
            loader={
              <div className="flex justify-center items-center border border-gray-300 p-2 rounded h-14">
                <Spinner className="w-6 h-6 text-gray-600 fill-gray-900"/>
              </div>
            }
          >
            {manufactures?.map((manufacture, index) => (
              manufacture.name ? (
                <ManufactureCard data={manufacture} key={index} />
              ) : ''
            ))}
          </InfiniteScroll>
        </div>
      </Layout>
    </>
  )
}