import React from 'react';
import { GetServerSideProps } from 'next';
import AuthLayout from '../../src/components/layout/AuthLayout';
import Splash from '../../src/components/pages/auth/Splash';
import SignUp from '../../src/components/pages/auth/SignUp';
import { SignUpProps } from '../../src/model/components/signUp';
import getDepartments from '../../src/utils/api/getDepartments';
import getTeams from '../../src/utils/api/getTeams';
import getCustomSettings from '../../src/utils/api/getSettings';
import SignUpClosed from '../../src/components/pages/auth/SignUpClosed';

const showSplash = false;
const showSignUp = true;

const signUp: React.FC<SignUpProps> = ({
  departments,
  teams,
  registerOpen,
}) => (
  <AuthLayout
    title="Nuevo usuario"
    mainClassName={showSplash || !registerOpen ? 'splash' : 'signUp'}
    splash={showSplash || !registerOpen}
    auth
  >
    {registerOpen ? (
      <>
        {showSplash ? <Splash /> : null}
        {showSignUp && !showSplash ? (
          <SignUp departments={departments} teams={teams} />
        ) : null}
      </>
    ) : (
      <SignUpClosed />
    )}
  </AuthLayout>
);

export const getServerSideProps: GetServerSideProps<SignUpProps> = async () => {
  const customSettings = await getCustomSettings();
  const departments = await getDepartments();
  const teams = await getTeams();
  const availableTeams = teams.filter(
    (team) => team.users.length < customSettings.teamLength,
  );

  return {
    props: {
      departments,
      teams: availableTeams,
      registerOpen: customSettings?.registerOpen,
    },
  };
};

export default signUp;