import { useTranslation } from 'react-i18next';

import HumandLogo from '@design-system/HumandLogo';
import Spinner from '@design-system/ProgressIndicators/Spinner';
import {
  Backdrop,
  Fade,
  Slide,
  Stack,
  type SxProps,
  useMediaQuery,
  useTheme,
} from '@mui/material';

type LoginLayoutProps = {
  children: React.ReactNode;
  banner: { src: string; styles?: React.CSSProperties };
  showBackdrop?: boolean;
  sx?: SxProps;
};

const LoginLayout = ({
  children,
  banner,
  showBackdrop = false,
  sx,
}: LoginLayoutProps) => {
  const theme = useTheme();
  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
  const { t } = useTranslation('material_hu_only');
  return (
    <>
      <Stack
        sx={{
          flex: 1,
          flexDirection: 'row',
          p: 9,
          gap: 8,
          minHeight: '100vh',
          justifyContent: 'center',
          backgroundColor: theme.palette.new.background.elements.default,
          ...sx,
        }}
      >
        <Slide
          direction="right"
          in={isMdUp}
          timeout={500}
          mountOnEnter
          unmountOnExit
        >
          <Stack
            sx={{
              flex: 2,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: theme.palette.newBase?.brand?.[100],
              borderRadius: 3,
              p: 4,
            }}
          >
            <Fade
              in={isMdUp}
              timeout={800}
            >
              <img
                alt="Banner"
                src={banner.src}
                style={{
                  width: '100%',
                  objectFit: 'cover',
                  ...banner.styles,
                }}
              />
            </Fade>
          </Stack>
        </Slide>
        <Stack
          sx={{
            alignItems: 'center',
            flex: 1,
            justifyContent: 'space-between',
            minWidth: 435,
            maxWidth: isMdUp ? 500 : 435,
            gap: 5,
          }}
        >
          <Stack
            sx={{
              alignSelf: 'flex-start',
            }}
          >
            <HumandLogo
              title={t('login.humand_logo_alt')}
              style={{ height: 30, width: 181 }}
            />
          </Stack>
          {children}
        </Stack>
      </Stack>
      <Backdrop
        sx={{
          color: theme.palette.base?.greyTransparent['900p60'],
        }}
        open={showBackdrop}
      >
        <Spinner />
      </Backdrop>
    </>
  );
};

export default LoginLayout;
