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'
            >
              What is Nostr?
            </Typography>
            <Typography
              sx={{
                color: bodyBackgroundColor
                  ? theme.palette.getContrastText(bodyBackgroundColor)
                  : ''
              }}
              variant='body1'
            >
              Nostr is a decentralised messaging protocol where YOU own your
              identity. To get started, you must have an existing{' '}
              <a
                className='bold-link'
                target='_blank'
                href='https://nostr.com/'
              >
                Nostr account
              </a>
              .
              <br />
              <br />
              No email required - all notifications are made using the nQuiz
              relay.
              <br />
              <br />
              If you no longer wish to hear from us, simply remove
              relay.nquiz.io from your list of relays.
            </Typography>
          </Box>
        </Box>

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