import React from "react";
import MainSlider from "@/components/index/slider";
import TopGallery from "@/components/index/topGallery";
import TopSliderSection from "@/components/index/topSection";
import Head from "next/head";
import CategorySlider from "@/components/utils/categorySlider";
import ProductSection from "@/components/index/productSection";
import ProductSlider from "@/components/utils/productSlider";
import { customerApi } from "@/api/api";
import CategoryMenu from "@/components/utils/categoryMenu";
import MainProductSection from "@/components/index/mainProductSection";
import BundleSection from "@/components/index/bundleSection";
import AboutUs from "@/components/index/aboutus";
import WhyUs from "@/components/index/whyus";
import CustomerReviewSlider from "@/components/utils/customerReviewSlider";
import BlogPostSlider from "@/components/utils/blogPostSlider";
import FadeInContainer from "@/components/utils/animation/fadeInContainer";
// import InstallPWA from "@/components/pwa/install";

export default function Index({ metaData, siteText }) {
  return (
    <React.Fragment>
      <Head>
        <title>
          {metaData.meta_title
            ? metaData.meta_title
            : "Home - " + process.env.NEXT_PUBLIC_COMPANY_NAME}
        </title>
        <meta charset="UTF-8" />
        <meta name="description" content={metaData.meta_description} />
        <meta
          name="keywords"
          content={
            metaData.meta_keywords && metaData.meta_keywords.length > 0
              ? metaData.meta_keywords.join(",")
              : ""
          }
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <div className="container">
        <div className="section">
          <CategorySlider singleCount={9} />
        </div>
        <MainSlider />
      </div>
      <FadeInContainer>
        <TopGallery siteText={siteText.top_gallery} singleCount={4} />
      </FadeInContainer>
      {/* <TopSliderSection siteText={siteText.top_section} /> */}

      {siteText.home_page_products_first && (
        <div className="container">
          <ProductSlider
            count={10}
            singleCount={5}
            title={siteText.home_page_products_first.title}
            id={
              siteText.home_page_products_first.content[0]
                .split("id[")[1]
                .split("]")[0]
            }
          />
        </div>
      )}
      {siteText.home_page_products_second && (
        <div className="container">
          <ProductSlider
            count={10}
            singleCount={5}
            title={siteText.home_page_products_second.title}
            id={
              siteText.home_page_products_second.content[0]
                .split("id[")[1]
                .split("]")[0]
            }
          />
        </div>
      )}
      {/* <AboutUs siteText={siteText.about_us_content} /> */}
      {/* {siteText.home_page_signature_cakes && (
        <div className="container">
          <ProductSlider
            count={3}
            singleCount={3}
            title={siteText.home_page_signature_cakes.title}
            id={
              siteText.home_page_signature_cakes.content[0]
                .split("id[")[1]
                .split("]")[0]
            }
          />
        </div>
      )} */}

      <div className="container">
        {/* <FadeInContainer>
          <MainProductSection siteText={siteText.home_page_signature_cakes} />
        </FadeInContainer> */}
        {/* <FadeInContainer>
          <CustomerReviewSlider title="Reviews" />
        </FadeInContainer> */}
        <ProductSection />
      </div>

      <BlogPostSlider count={10} singleCount={5} title="Latest Posts" />
      <WhyUs siteText={siteText.why_choose} />
    </React.Fragment>
  );
}

export const getStaticProps = async (ctx) => {
  let siteText = {};
  let metaData = {};
  await Promise.all([
    customerApi.get("/site/contents?group_code=home_section"),
    customerApi.get("/site/meta?path=/"),
  ])
    .then((res) => {
      console.log("res.data, ", res[0].data.result.top_gallery);
      console.log("res.data1, ", res[1].data);
      let newArray = { ...res[0].data.result };
      siteText = newArray;
      metaData = res[1].data.data;
    })
    .catch((err) => {
      console.log("err:", err);
    });
  return {
    props: {
      siteText: siteText,
      metaData: metaData,
    },
    revalidate: 600,
  };
};
