Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link, Outlet, useMatch } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { AppBar, Box, Button, Container, styled, Toolbar, Typography } from '@mui/material';
import Slider from 'react-slick';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

import { parse } from '@utils';
import { ArrowBackIos, ArrowForwardIos } from '@mui/icons-material';

const Section = styled('section')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  gap: theme.spacing(0.5),
  justifyContent: 'center',
  alignItems: 'center',
  flex: 1,
  '& > img': {
    display: 'block',
    margin: '0 auto'
  }
}));

const AuthPage = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  gap: '1rem',
  justifyContent: 'center',
  alignItems: 'center',
  width: '100%',
  maxWidth: '100vw',
  overflow: 'hidden',
  padding: '0 1rem',

  [theme.breakpoints.up('md')]: {
    flexDirection: 'row',
    minHeight: 'calc(100vh - 120px)',
    justifyContent: 'space-between',
    alignItems: 'stretch',
    padding: '0'
  }
}));

const AuthSlider = styled(Slider)(({ theme }) => ({
  maxWidth: '100%',
  width: '100%',
  margin: '0 auto',
  marginBottom: theme.spacing(2),

  // Estilos para las imágenes del slider
  '& img': {
    maxWidth: '250px !important',
    maxHeight: '250px !important',
    display: 'block !important',
    margin: 'auto',
    borderRadius: '12px',
    objectFit: 'contain',
    transition: 'transform 0.3s ease',

    // Responsive para imágenes - iOS optimizado
    [theme.breakpoints.down('sm')]: {
      maxWidth: '200px !important',
      maxHeight: '200px !important'
    },

    // Para pantallas muy pequeñas de iPhone
    '@media (max-width: 390px)': {
      maxWidth: '180px !important',
      maxHeight: '180px !important'
    }
  },

  // Estilos para cada slide
  '& .slick-slide': {
    padding: '0 4px',
    textAlign: 'center',
    outline: 'none'
  },

  // Contenedor de cada slide
  '& .slick-slide > div': {
    outline: 'none',
    display: 'flex !important',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },

  // Estilos para los textos del slider
  '& .MuiTypography-root': {
    marginTop: theme.spacing(1.5),
    fontSize: '1rem',
    fontWeight: 600,
    color: theme.palette.text.primary,
    textAlign: 'center',
    lineHeight: 1.3,
    maxWidth: '250px',
    margin: `${theme.spacing(1.5)} auto 0`,

    // Responsive para textos
    [theme.breakpoints.down('sm')]: {
      fontSize: '0.95rem',
      marginTop: theme.spacing(1),
      maxWidth: '200px'
    },

    // Para pantallas muy pequeñas de iPhone
    '@media (max-width: 390px)': {
      fontSize: '0.9rem',
      marginTop: theme.spacing(0.5),
      maxWidth: '180px'
    }
  },

  // Estilos para los dots/puntos de navegación
  '& .slick-dots': {
    position: 'relative',
    bottom: 'auto',
    marginTop: theme.spacing(2),
    marginBottom: 0,

    '& li': {
      margin: '0 3px',

      '& button': {
        width: '10px',
        height: '10px',

        '&:before': {
          fontSize: '10px',
          color: theme.palette.primary.main,
          opacity: 0.4,
          width: '10px',
          height: '10px',
          lineHeight: '10px'
        }
      },

      '&.slick-active button:before': {
        opacity: 1,
        color: theme.palette.primary.main,
        transform: 'scale(1.3)'
      }
    }
  },

  // Estilos para transiciones
  '& .slick-track': {
    display: 'flex',
    alignItems: 'center'
  },

  // Lista del slider
  '& .slick-list': {
    overflow: 'hidden',
    borderRadius: '8px'
  },

  // Ocultar en pantallas medianas y grandes
  [theme.breakpoints.up('md')]: {
    display: 'none'
  }
}));

const AuthLayout = () => {
  const { logo_url, intro } = useSelector(({ auth }) => auth);
  const isRoot = useMatch('/');

  return (
    <>
      <AppBar
        sx={{
          position: 'relative',
          backgroundColor: 'transparent',
          boxShadow: 'none',
          zIndex: 1
        }}
      >
        <Container>
          <Toolbar
            sx={{
              minHeight: 'none',
              padding: 0,
              '& img': {
                display: { md: 'none' }
              }
            }}
          >
            <Link to='/'>
              <img src={logo_url} alt='Logo' width={50} />
            </Link>
          </Toolbar>
        </Container>
      </AppBar>

      <Container
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          maxWidth: '100vw',
          overflow: 'hidden',
          padding: { xs: '0 1rem', md: '0' }
        }}
      >
        <AuthPage>
          <Section
            sx={{
              display: { xs: isRoot ? 'flex' : 'none', md: 'flex' }
            }}
          >
            <Box
              sx={{
                display: { xs: 'flex', md: 'none' },
                flexDirection: 'column',
                gap: '1rem',
                alignItems: 'center',
                justifyContent: 'center',
                width: '100%',
                maxWidth: '400px',
                padding: '1rem'
              }}
            >
              {isRoot && (
                <AuthSlider
                  autoplay={true}
                  infinite={true}
                  pauseOnHover={true}
                  pauseOnFocus={true}
                  dots={true}
                  arrows={false}
                  accessibility={true}
                  nextArrow={<ArrowForwardIos />}
                  prevArrow={<ArrowBackIos />}
                >
                  <Box>
                    <img src='/images/intro_slide_1.png' alt='image slide' />
                    <Typography>Desarrollate en Líder moderno</Typography>
                  </Box>

                  <Box>
                    <img src='/images/intro_slide_2.png' alt='image slide' />
                    <Typography>Evoluciona día a día</Typography>
                  </Box>

                  <Box>
                    <img src='/images/intro_slide_3.png' alt='image slide' />
                    <Typography>Construye tu futuro</Typography>
                  </Box>
                </AuthSlider>
              )}

              <Button
                variant='contained'
                color='primary'
                fullWidth
                LinkComponent={Link}
                to='/signin'
              >
                Iniciar sesión
              </Button>
              <Button
                variant='contained'
                color='primary'
                fullWidth
                LinkComponent={Link}
                to='/forgot-password'
              >
                Olvidé mi contraseña
              </Button>
            </Box>

            <Box
              sx={{
                display: { xs: isRoot ? 'none' : 'flex', md: 'flex' },
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'column',
                gap: '1rem'
              }}
            >
              <img src={logo_url} alt='Leaderslinked logo' />
              <Typography>{parse(intro)}</Typography>
            </Box>
          </Section>

          <Section
            sx={{
              display: { xs: isRoot ? 'none' : 'flex', md: 'flex' }
            }}
          >
            <Outlet />
          </Section>
        </AuthPage>
      </Container>
    </>
  );
};

export default AuthLayout;