import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton';
import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton';
import Seo from '@/core/components/Seo';
import DelayRender from '@/core/components/elements/DelayRender/DelayRender';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';
import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
import PagePopupInformation from '@/lib/home/components/PopupBannerPromotion';
import dynamic from 'next/dynamic';
import { useRef } from 'react';
import { getAuth } from '~/libs/auth';
import MediaNews from '../lib/home/components/MediaNews';

const BasicLayout = dynamic(() =>
  import('@/core/components/layouts/BasicLayout')
);

const PagePopupIformation = dynamic(() =>
  import('~/modules/popup-information'), {
    ssr: false
  }
);

const CategoryPilihan = dynamic(() =>
  import('../lib/home/components/CategoryPilihan')
);
const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
  loading: () => <HeroBannerSkeleton />,
});
const HeroBannerSecondary = dynamic(
  () => import('@/components/ui/HeroBannerSecondary'),
  {
    loading: () => <HeroBannerSkeleton />,
  }
);
const PopularProduct = dynamic(() => import('@/components/ui/PopularProduct'), {
  loading: () => <PopularProductSkeleton />,
});

const PreferredBrand = dynamic(
  () => import('@/lib/home/components/PreferredBrand'),
  {
    loading: () => <PreferredBrandSkeleton />,
  }
);

const FlashSale = dynamic(
  () => import('@/lib/flashSale/components/FlashSale'),
);

const ProgramPromotion = dynamic(
  () => import('@/lib/home/components/PromotionProgram')
);

const BannerSection = dynamic(() =>
  import('@/lib/home/components/BannerSection')
);
const CategoryHomeId = dynamic(
  () => import('@/lib/home/components/CategoryHomeId')
);

const CategoryDynamic = dynamic(() =>
  import('@/lib/home/components/CategoryDynamic')
);

const CategoryDynamicMobile = dynamic(() =>
  import('@/lib/home/components/CategoryDynamicMobile')
);

const CustomerReviews = dynamic(
  () => import('@/lib/review/components/CustomerReviews'),
  { ssr: false }
); // need to ssr:false
const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'), {
  ssr: false,
}); // need to ssr: false

export default function Home({ categoryId }) {
  const bannerRef = useRef(null);
  const wrapperRef = useRef(null);

  const auth = getAuth();

  const handleOnLoad = () => {
    wrapperRef.current.style.height =
      bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px';
  };

  return (
    <>
      <BasicLayout>
        <Seo
          title='Indoteknik.com: B2B Industrial Supply & Solution'
          description='Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.'
          additionalMetaTags={[
            {
              name: 'keywords',
              content:
                'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
            },
          ]}
          openGraph={
            {
              title : 'Indoteknik.com: B2B Industrial Supply & Solution',
              description : 'Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.',    
              images: [
                {
                  url: 'https://indoteknik.com/icon.jpg',
                  width: 800,
                  height: 600,
                  alt: 'indoteknik.com',
                },
              ],
            }
          }
        />

        <PagePopupIformation />

        <DesktopView>
          <PagePopupInformation />
          <div className='container mx-auto'>
            <div
              className='flex min-h-[400px] h-[460px]'
              ref={wrapperRef}
              onLoad={handleOnLoad}
            >
              <div className='w-2/12'>
                <HeroBannerSecondary />
              </div>
              <div className='w-7/12 px-1' ref={bannerRef}>
                <HeroBanner />
              </div>
              <div className='w-3/12'>
                <DelayRender renderAfter={200}>
                  <PopularProduct />
                </DelayRender>
              </div>
            </div>

            <div className='my-16 flex flex-col gap-y-8'>
              <ServiceList />
              <MediaNews />
              <div id='flashsale'>
                <PreferredBrand />
              </div>
              {!auth?.feature?.soApproval && (
                <>
                  <DelayRender renderAfter={200}>
                    <ProgramPromotion />
                  </DelayRender>
                  <DelayRender renderAfter={200}>
                    <FlashSale />
                  </DelayRender>
                </>
              )}
              {/* <PromotinProgram /> */}
              <CategoryPilihan />
              <CategoryDynamic />
              <CategoryHomeId />
              <BannerSection />
              <CustomerReviews />
            </div>
          </div>
        </DesktopView>
        <MobileView>
          <PagePopupInformation />
          <DelayRender renderAfter={200}>
            <HeroBanner />
          </DelayRender>
          <div className='flex flex-col gap-y-4 my-6'>
            <DelayRender renderAfter={400}>
              <ServiceList />
              <MediaNews />
            </DelayRender>
            <DelayRender renderAfter={400}>
              <div id='flashsale'>
                <PreferredBrand />
              </div>
            </DelayRender>
            {!auth?.feature?.soApproval && (
              <>
                <DelayRender renderAfter={400}>
                  <ProgramPromotion />
                </DelayRender>
                <DelayRender renderAfter={600}>
                  <FlashSale />
                </DelayRender>
              </>
            )}
            <DelayRender renderAfter={600}>
              {/* <PromotinProgram /> */}
            </DelayRender>
            <DelayRender renderAfter={600}>
              <CategoryPilihan />
              <CategoryDynamicMobile />
            </DelayRender>
            <DelayRender renderAfter={800}>
              <PopularProduct />
            </DelayRender>
            <DelayRender renderAfter={1000}>
              <CategoryHomeId />
              <BannerSection />
            </DelayRender>
            <DelayRender renderAfter={1200}>
              <CustomerReviews />
            </DelayRender>
          </div>
        </MobileView>
      </BasicLayout>
    </>
  );
}