Vizzuality/landgriffon

import { useRef, useState } from 'react';
import { Transition } from '@headlessui/react';
import { MapProvider } from 'react-map-gl/maplibre';
import dynamic from 'next/dynamic';
import { dehydrate } from '@tanstack/react-query';

import { auth } from '@/pages/api/auth/[...nextauth]';
import { tasksSSR } from 'services/ssr';
import ApplicationLayout from 'layouts/application';
import CollapseButton from 'containers/collapse-button/component';
import TitleTemplate from 'utils/titleTemplate';
import { useAppSelector } from '@/store/hooks';
import SuppliersStackedBar from '@/containers/analysis-eudr/suppliers-stacked-bar';
import EUDRFilters from '@/containers/analysis-eudr/filters/component';
import SupplierListTable from '@/containers/analysis-eudr/supplier-list-table';
import getQueryClient from '@/lib/react-query';

import type { NextPageWithLayout } from 'pages/_app';
import type { ReactElement } from 'react';
import type { GetServerSideProps } from 'next';

const DynamicMap = dynamic(() => import('containers/analysis-eudr/map'), {
  ssr: false,
});

const DynamicCompareMap = dynamic(() => import('containers/analysis-eudr/map/compare'), {
  ssr: false,
});

const MapPage: NextPageWithLayout = () => {
  const scrollRef = useRef<HTMLDivElement>(null);
  const { planetCompareLayer } = useAppSelector((state) => state.eudr);
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <MapProvider>
      <TitleTemplate title="EUDR" />
      <div className="flex h-full w-full">
        <aside className="relative h-full flex-shrink-0 rounded-tl-3xl bg-gray-100">
          <div className="absolute right-0 top-6 z-40 translate-x-1/2 transform">
            <CollapseButton isCollapsed={isCollapsed} onClick={setIsCollapsed} />
          </div>
          <Transition
            as="div"
            show={!isCollapsed}
            enter="transform transition ease-in duration-100"
            enterFrom="opacity-10"
            enterTo="opacity-100"
            leave="transform transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-10"
            className="h-full w-[820px] overflow-y-auto overflow-x-hidden"
            ref={scrollRef}
          >
            <div className="flex h-full flex-col">
              <div className="space-y-2 px-6 py-8">
                <h2>EUDR complience Analysis</h2>
                <EUDRFilters />
              </div>
              <div className="flex-1 space-y-7 bg-white px-6 py-8">
                <SuppliersStackedBar />
                <SupplierListTable />
              </div>
            </div>
          </Transition>
        </aside>

        <section className="relative flex h-screen flex-1 flex-col">
          {!planetCompareLayer.active && <DynamicMap />}
          {planetCompareLayer.active && <DynamicCompareMap />}
        </section>
      </div>
    </MapProvider>
  );
};

MapPage.Layout = function getLayout(page: ReactElement) {
  return <ApplicationLayout>{page}</ApplicationLayout>;
};

export const getServerSideProps: GetServerSideProps = async ({ req, res, query }) => {
  try {
    const tasks = await tasksSSR({ req, res });
    if (tasks && tasks[0]?.attributes.status === 'processing') {
      return {
        redirect: {
          permanent: false,
          destination: '/data',
        },
      };
    }

    const session = await auth(req, res);
    const queryClient = getQueryClient();

    queryClient.setQueryData(['profile', session.accessToken], session.user);

    return { props: { query, session, dehydratedState: dehydrate(queryClient) } };
  } catch (error) {
    if (error.code === '401' || error.response.status === 401) {
      return {
        redirect: {
          permanent: false,
          destination: '/auth/signin',
        },
      };
    }
  }
};

export default MapPage;