import { Box, Button, Typography, useTheme } from '@mui/material'
import { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'
import { appPublicRoutes } from '../../routes'
import { State } from '../../store/rootReducer'
import { saveVisitedLink } from '../../utils'
import styles from './style.module.scss'

const bodyBackgroundColor = document.body.style.backgroundColor

export const LandingPage = () => {
  const authState = useSelector((state: State) => state.auth)
  const navigate = useNavigate()
  const location = useLocation()

  const theme = useTheme()

  useEffect(() => {
    saveVisitedLink(location.pathname, location.search)
  }, [location])

  const onSignInClick = async () => {
    navigate(appPublicRoutes.login)
  }

  return (
    <>
      <div className={styles.landingPage}>
        <Box
          mt={10}
          sx={{
            width: '100%',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: { xs: 'column', md: 'row' }
          }}
        >
          <Box
            sx={{
              mr: {
                xs: 0,
                md: 5
              },
              mb: {
                xs: 5,
                md: 0
              }
            }}
          >
            <Typography
              sx={{
                fontWeight: 'bold',
                marginBottom: 5,
                color: bodyBackgroundColor
                  ? theme.palette.getContrastText(bodyBackgroundColor)
                  : ''
              }}
              variant="h4"
            >
              Secure Document Signing
            </Typography>
            <Typography
              sx={{
                color: bodyBackgroundColor
                  ? theme.palette.getContrastText(bodyBackgroundColor)
                  : ''
              }}
              variant="body1"
            >
              SIGit is an open-source and self-hostable solution for secure
              document signing and verification. Code is MIT licenced and
              available at{' '}
              <a
                className="bold-link"
                target="_blank"
                href="https://git.sigit.io/sig/it"
              >
                https://git.sigit.io/sig/it
              </a>
              .
              <br />
              <br />
              SIGit lets you Create, Sign and Verify signature packs from any
              device with a browser.
              <br />
              <br />
              Unlike other solutions, SIGit is totally private - files are
              encrypted locally, and valid packs can only be exported by named
              recipients.
              <br />
              <br />
              IMPORTANT - please note that SIGit is currently ALPHA software and
              should only be used for testing purposes until we have finalised
              the signature / verification process.
            </Typography>
          </Box>
        </Box>

        {!authState?.loggedIn && (
          <div className={styles.loginBottomBar}>
            <Button
              className={styles.loginBtn}
              variant="contained"
              onClick={onSignInClick}
            >
              GET STARTED
            </Button>
          </div>
        )}
      </div>
    </>
  )
}