import { useEffect, useState } from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper";
import Header from "../components/Header";
import apiOdoo from "../helpers/apiOdoo";
import "react-lazy-load-image-component/src/effects/blur.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import ProductSlider from "../components/product/ProductSlider";
import Layout from "../components/Layout";
import axios from "axios";
import ManufactureCard from "../components/ManufactureCard";

export async function getServerSideProps() {
  const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);

  return { props: { heroBanners } };
}

export default function Home({ heroBanners }) {
  const [manufactures, setManufactures] = useState(null);
  const [readyStockProducts, setReadyStockProducts] = useState(null);
  const [popularProducts, setPopularProducts] = useState(null);

  useEffect(() => {
    const getManufactures = async () => {
      const dataManufactures = await apiOdoo('GET', `/api/v1/manufacture?level=prioritas`);
      setManufactures(dataManufactures);
    }
    getManufactures();
    
    const getReadyStockProducts = async () => {
      const dataReadyStockProducts = await apiOdoo('GET', `/api/v1/product?ready_stock=1&limit=30`);
      setReadyStockProducts(dataReadyStockProducts);
    }
    getReadyStockProducts();

    const getPopularProducts = async () => {
      const dataPopularProducts = await axios(`${process.env.SELF_HOST}/api/shop/search?q=*&page=1&order_by=popular`);
      setPopularProducts(dataPopularProducts.data.response);
    }
    getPopularProducts();
  }, []);

  return (
    <>
      <Header title='Home - Indoteknik' />
      <Layout>
        <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
          {
            heroBanners?.map((banner, index) => (
              <SwiperSlide key={index}>
                <LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
              </SwiperSlide>
            ))
          }
        </Swiper>
        <div className="mt-6 px-4">
          <h2 className="mb-3">Brand Pilihan</h2>
          <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
            {
              manufactures?.manufactures?.map((manufacture, index) => (
                <SwiperSlide key={index}>
                  <ManufactureCard data={manufacture} key={index} />
                </SwiperSlide>
              ))
            }
          </Swiper>
        </div>
        <div className="mt-6 px-4 mb-6">
          <h2 className="mb-3">Produk Populer</h2>
          <ProductSlider products={popularProducts} />
        </div>
        <div className="mt-6 px-4 mb-6">
          <h2 className="mb-3">Produk Ready Stock</h2>
          <ProductSlider products={readyStockProducts} />
        </div>
      </Layout>
    </>
  )
}