import styled from '@emotion/styled';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { AdminButton, AdminWrapper } from '../../next-res/components/admin/common';
import DashboardCancellation from '../../next-res/components/admin/DashboardCancellation';
import DashboardEngagedUsers from '../../next-res/components/admin/DashboardEngagedUsers';
import DashboardMoney from '../../next-res/components/admin/DashboardMoney';
import DashboardUsers from '../../next-res/components/admin/DashboardUsers';
import { NavbarPage, NavigationBar } from '../../next-res/components/admin/NavBar';

const DashboardButtonWrapper = styled.div`
  display: flex;
  justify-content: left;
  gap: 20px;
  margin-bottom: 20px;
`;

enum Dashboard {
  Users = 'users',
  Money = 'money',
  Cancellation = 'cancellations',
  EngagedUsers = 'engaged-users',
}

const DashboardMap: {
  [key in Dashboard]: {
    name: string;
    slug: string;
  };
} = {
  [Dashboard.Users]: {
    name: 'Users',
    slug: 'users',
  },
  [Dashboard.Money]: {
    name: 'Money',
    slug: 'money',
  },
  [Dashboard.Cancellation]: {
    name: 'Cancellations',
    slug: 'cancellations',
  },
  [Dashboard.EngagedUsers]: {
    name: 'Engaged Users',
    slug: 'engaged-users',
  },
};

const Dashboards = ({ serverUri }: { serverUri: string }) => {
  const [dashboard, setDashboard] = useState<Dashboard>();
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  useEffect(() => {
    const dashboard = searchParams.get('page');
    // Verify that the dashboard is a valid dashboard
    if (
      !dashboard ||
      (dashboard &&
        !Object.values(DashboardMap)
          .map((d) => d.slug)
          .includes(dashboard))
    ) {
      router.push(`${pathname}?page=${Dashboard.Users}`);
    } else {
      setDashboard(searchParams.get('page') as Dashboard);
    }
  }, [searchParams]);

  return (
    <AdminWrapper>
      <NavigationBar currentPage={NavbarPage.Dashboards} />

      <DashboardButtonWrapper>
        {Object.values(DashboardMap).map((d) => (
          <AdminButton
            disabled={d.slug === dashboard}
            key={d.slug}
            onClick={() => {
              router.push(`${pathname}?page=${d.slug}`);
            }}
          >
            {d.name}
          </AdminButton>
        ))}
      </DashboardButtonWrapper>

      {dashboard === Dashboard.Users && <DashboardUsers serverUri={serverUri} />}
      {dashboard === Dashboard.Money && <DashboardMoney serverUri={serverUri} />}
      {dashboard === Dashboard.Cancellation && <DashboardCancellation serverUri={serverUri} />}
      {dashboard === Dashboard.EngagedUsers && <DashboardEngagedUsers serverUri={serverUri} />}
    </AdminWrapper>
  );
};

export async function getServerSideProps(context: any) {
  const serverUri = process.env.SERVER_URI || 'http://localhost:3001';

  // Get the user's session based on the request
  if (context?.req?.user?.role !== 'admin') {
    context.res.statusCode = 404;
    context.res.end();
  }

  return {
    props: { serverUri },
  };
}

export default Dashboards;