import { useEffect, useState } from "react";
import { Pagination, Autoplay } from "swiper";
import axios from "axios";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";

// Helpers
import apiOdoo from "@/core/utils/apiOdoo";

// Components
import Header from "@/components/layouts/Header";
import ProductSlider from "@/components/products/ProductSlider";
import Layout from "@/components/layouts/Layout";
import ManufactureCard from "@/components/manufactures/ManufactureCard";
import Footer from "@/components/layouts/Footer";
import Image from "@/components/elements/Image";
import ProductCategories from "@/components/products/ProductCategories";

const swiperBanner = {
  pagination: { dynamicBullets: true },
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  modules: [Pagination, Autoplay]
}

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 [popularProducts, setPopularProducts] = useState(null);

  useEffect(() => {
    const getManufactures = async () => {
      const dataManufactures = await apiOdoo('GET', `/api/v1/manufacture?level=prioritas`);
      setManufactures(dataManufactures);
    }
    getManufactures();

    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={swiperBanner.pagination} 
          modules={swiperBanner.modules}
          autoplay={swiperBanner.autoplay}
        >
          {
            heroBanners?.map((banner, index) => (
              <SwiperSlide key={index}>
                <Image
                  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="my-6 p-4 py-0">
          <h2 className="mb-4">Produk Populer</h2>
          <ProductSlider products={popularProducts} simpleProductTitleLine />
        </div>

        <ProductCategories />

        <div className="px-4">
          <h5 className="h2 mb-2">Platform Belanja B2B Alat Teknik & Industri di Indonesia</h5>
          <p className="text-gray_r-11 leading-6 text-caption-2 mb-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
          </p>
        </div>
        
        <Footer />
      </Layout>
    </>
  )
}