import { AuthBackground } from '@/components/AuthBackground';
import { AuthCard } from '@/components/AuthCard';
import { ThemeColor } from '@/components/Layout';
import { Footer } from '@/components/Layout/Footer';
import { MainIcon } from '@/components/MainIcon';
import { Box, Grid } from '@mui/material';
import React, { PropsWithChildren } from 'react';

type AuthWrapperProps = PropsWithChildren<{
  version: string;
  name: string;
  copy?: string;
  background?: React.ReactNode | React.ComponentType;
  logo?: React.ReactNode;
  footer?: boolean;
}>;

function AuthWrapper({
  version,
  name,
  copy,
  children,
  logo,
  background = AuthBackground,
  footer = true
}: AuthWrapperProps) {
  return (
    <Box>
      <ThemeColor source="default" />
      {React.isValidElement(background) ? background : React.createElement(background as any)}
      <Grid container direction="column" justifyContent="flex-end">
        <Grid item xs={12} sx={{ ml: 3 }}>
          {logo ? logo : <MainIcon title={name} />}
        </Grid>
        <Grid item xs={12}>
          <Grid
            item
            xs={12}
            container
            justifyContent="center"
            alignItems="center"
            sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' } }}
          >
            <Grid item>
              <AuthCard>{children}</AuthCard>
            </Grid>
          </Grid>
          {footer ? (
            <Grid item sx={{ pb: 1, position: 'absolute', bottom: 0, ml: 2 }}>
              <Footer name={name} copy={copy} version={version} />
            </Grid>
          ) : null}
        </Grid>
      </Grid>
    </Box>
  );
}

export { AuthWrapper };