/* eslint-disable react/no-danger */
import dynamic from 'next/dynamic';
import { END } from 'redux-saga';
import { useEffect, useMemo } from 'react';
import { actions, GET_DETAIL_PROJECT } from '@containers/Home/slice';
import { wrapper, SagaStore } from 'store';
import { NextSeo } from 'next-seo';
import { useRouter } from 'next/router';
import { useDispatch, useSelector } from 'react-redux';
import {
  selectConfigLittlePlanetProject,
  selectConfigFirstSceneProject,
  selectFirstSceneMediaProject,
  selectGATagTrackingProject,
  selectFeatureImageProject,
  selectGATrackingProject,
  selectThumbnailProject,
  selectMetaDataProject,
  selectTitleProject,
  selectListScene,
} from '@containers/Home/selectors';
import Script from 'next/script';
import {
  LIST_FAVICON_DEFAULT,
  LIST_LINK_STYLE_SHEET,
} from '@containers/Home/constants';

const Home = dynamic(() => import('containers/Home'), {
  loading: () => <span>Loading</span>,
  ssr: false,
});

function PublicContainer() {
  const router = useRouter();
  const dispatch = useDispatch();

  const title = useSelector(selectTitleProject);
  const listScene = useSelector(selectListScene);
  const metadata = useSelector(selectMetaDataProject);
  const thumbnail = useSelector(selectThumbnailProject);
  const ga_tracking = useSelector(selectGATrackingProject);
  const feature_image = useSelector(selectFeatureImageProject);
  const first_scene = useSelector(selectConfigFirstSceneProject);
  const ggtag_tracking = useSelector(selectGATagTrackingProject);
  const first_scene_media = useSelector(selectFirstSceneMediaProject);
  const config_little_planet = useSelector(selectConfigLittlePlanetProject);

  const detailFirstScene = useMemo(
    () => listScene.filter(item => item.id === first_scene)[0] || undefined,
    [listScene, first_scene],
  );

  const images = useMemo(() => {
    const imgs: any = [];
    if (thumbnail?.src)
      imgs.push({
        url: thumbnail?.src,
        width: 800,
        height: 600,
        alt: thumbnail?.name,
      });

    if (feature_image)
      imgs.push({
        url: feature_image,
        width: 800,
        height: 600,
        alt: '',
      });

    if (first_scene_media?.src)
      imgs.push({
        url:
          first_scene_media?.src_thumb ||
          first_scene_media?.src_preview ||
          first_scene_media?.src,
        width: 800,
        height: 600,
        alt: first_scene_media?.name,
      });

    return imgs;
  }, [thumbnail, feature_image, first_scene_media]);

  useEffect(() => {
    if (listScene && listScene.length) {
      let scene = detailFirstScene
        ? { ...detailFirstScene }
        : { ...listScene[0] };
      if (router.query.scene)
        scene = {
          ...listScene.filter(item => item.id === router.query.scene[0])[0],
        } || {
          ...listScene[0],
        };
      // NOTE: add intro little planet for first scene loaded
      scene.config = scene?.config || {};
      scene.config = {
        ...scene.config,
        isLittlePlanet: config_little_planet?.enable || false,
        timeTransitionLittlePlanet: config_little_planet?.transition_time || 2,
      };
      dispatch(actions.setSceneSelected(scene));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [listScene.length]);

  // useEffect(() => {
  //   if (ga_tracking) router.events.on('routeChangeStart', onHandleRouteChange);
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [ga_tracking]);

  // useEffect(() => {
  //   if (ggtag_tracking)
  //     router.events.on('routeChangeStart', onHandleRouteChange);
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [ggtag_tracking]);

  // useEffect(
  //   () => () => {
  //     router.events.off('routeChangeStart', onHandleRouteChange);
  //   },
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  //   [],
  // );

  return (
    <>
      <NextSeo
        title={metadata?.title || title}
        description={metadata?.description || 'Panoee - Virtual Tour 360'}
        additionalLinkTags={
          metadata?.favicon
            ? [
                ...[
                  {
                    rel: 'shortcut icon',
                    href: metadata?.favicon,
                  },
                ],
                ...LIST_LINK_STYLE_SHEET,
              ]
            : [...LIST_FAVICON_DEFAULT, ...LIST_LINK_STYLE_SHEET]
        }
        openGraph={{
          type: 'website',
          url: process.env.NEXT_PUBLIC_BASE_URL + router.asPath,
          title: metadata?.title || title,
          description: metadata?.description || 'Panoee - Virtual Tour 360',
          images,
          site_name: metadata?.title || title || 'Panoee Tour',
          profile: {
            username: router.query.username as string,
          },
        }}
        facebook={{
          appId: process.env.NEXT_PUBLIC_FB_APP_ID || '2086263614924092',
        }}
      />
      {ga_tracking && (
        <>
          <Script
            strategy="beforeInteractive"
            src={`https://www.googletagmanager.com/gtag/js?id=${ga_tracking}`}
          />
          <Script
            id="gg-tag"
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${ga_tracking}', {
                  page_path: window.location.pathname,
                });
              `,
            }}
          />
        </>
      )}
      {ggtag_tracking && (
        <>
          <Script
            strategy="beforeInteractive"
            src={`https://www.googletagmanager.com/gtag/js?id=${ggtag_tracking}`}
          />
          <Script
            id="gg-tag-1"
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('config', '${ggtag_tracking}');
              `,
            }}
          />
        </>
      )}
      <Home isPublic />
    </>
  );
}

export const getServerSideProps = wrapper.getServerSideProps(
  store =>
    async ({ res, query }) => {
      if (query.tour || (query.scene && query.scene.length === 1)) {
        res.setHeader(
          'Cache-Control',
          'public, s-maxage=10, stale-while-revalidate=59',
        );
        store.dispatch(GET_DETAIL_PROJECT({ id: query.tour, isPublic: true }));
        store.dispatch(END);
        await (store as SagaStore).sagaTask?.toPromise();
        return {
          props: {},
        };
      }
      return {
        notFound: true,
      };
    },
);

export default PublicContainer;