import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import Image from 'next/image';
import NextLink from 'next/link';
import { useRouter } from 'next/router';

import { ACTIVATION_GUEST_PAGE, LOGIN_PAGE } from '@/modules/@common/router/constants';

import { isFormLoadingSelector } from '@/modules/auth/common/redux/selectors';

import { LinearProgress, Link, Paper, Stack, Typography } from '@/mui/components';

import logo from '@/assets/img/logo.png';

import styles from './Layout.module.scss';

function Layout({ subTitle = null, firstSection = null, secondSection = null, footer = null, ...props }) {
  const router = useRouter();
  const isFormLoading = useSelector(isFormLoadingSelector);
  const isGuestActivation = router.route === ACTIVATION_GUEST_PAGE.path;

  return (
    <Stack spacing={0} justifyContent="center" alignItems="center" className={styles.Container}>
      {!props.shouldHideContent && (
        <Stack spacing={5} justifyContent="center">
          <Stack direction="row" justifyContent="center">
            <Image src={logo} alt="AnyClip" className={styles.Logo} width={258} height={65} />
          </Stack>
          <Stack
            className={styles.Paper}
            component={Paper}
            data-id="auth-form"
            elevation={24}
            spacing={0}
            direction={{ lg: 'column', xl: 'row' }}
            alignItems="stretch"
            justifyContent="stretch"
            fullWidth
          >
            <div className={styles.Left}>
              {isFormLoading && <LinearProgress className={styles.Progress} />}
              <Stack spacing={2} className={styles.LeftWrapper}>
                <Typography variant="h6" className={styles.LeftTitle}>
                  {props.title}
                </Typography>
                {subTitle && (
                  <Typography variant="body2" className={styles.LeftSubTitle} fontWeight={400}>
                    {subTitle}
                  </Typography>
                )}
                <Stack
                  spacing={4}
                  className={styles.LeftContent}
                  divider={
                    <Stack spacing={1} direction="row" alignItems="center" fullWidth className={styles.SectionDivider}>
                      <Typography variant="body2" fontWeight={400} align="center" component="div" color="text.disabled">
                        Or&nbsp;use
                      </Typography>
                    </Stack>
                  }
                >
                  {firstSection}
                  {secondSection}
                </Stack>
                {footer !== false ? (
                  <Typography variant="body2" component="div" align="center" fontWeight={400}>
                    {footer ?? (
                      <Link
                        component={NextLink}
                        data-id="back-to-signin"
                        href={LOGIN_PAGE.path}
                        disabled={isFormLoading}
                      >
                        Back to Sign in page
                      </Link>
                    )}
                  </Typography>
                ) : null}
              </Stack>
            </div>
            <Stack className={styles.Right} justifyContent="space-between">
              <Stack spacing={5} alignItems="flex-start">
                <Typography variant="body2" fontWeight={400}>
                  {isGuestActivation ? 'Welcome to AnyClip' : ''}
                </Typography>
                {isGuestActivation ? (
                  <Typography variant="h3">The Visual Intelligence Company</Typography>
                ) : (
                  [
                    {
                      title: 'About AnyClip',
                      href: 'https://anyclip.com',
                    },
                    {
                      title: 'Latest news',
                      href: 'https://anyclip.com/press',
                    },
                    {
                      title: 'Ask a question',
                      href: 'https://anyclip.com/contact/?inquiry=contact%20support',
                    },
                  ].map((link) => (
                    <div key={link.href}>
                      <Link target="_blank" color="inherit" variant="h5" href={link.href}>
                        {link.title}
                      </Link>
                    </div>
                  ))
                )}
              </Stack>
              <Stack>
                <Link target="_blank" color="inherit" variant="caption" href="https://anyclip.com/privacy-policy/">
                  Privacy Policy
                </Link>
                <Link target="_blank" color="inherit" variant="caption" href="https://anyclip.com/terms-use/">
                  Terms of Service
                </Link>
              </Stack>
            </Stack>
          </Stack>
        </Stack>
      )}
    </Stack>
  );
}

Layout.propTypes = {
  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
  subTitle: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  firstSection: PropTypes.node,
  secondSection: PropTypes.node,
  shouldHideContent: PropTypes.bool,
  footer: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.node, PropTypes.string]), PropTypes.oneOf([false])]),
};

export default Layout;
