import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Title from '../Title'
import Policy from '../Policy'
import EmailInput from '../EmailInput'
import MainButton from '../MainButton'
import routes from '../../routes'

function EmailEnterPage(): JSX.Element {
  const navigate = useNavigate()
  const [email, setEmail] = useState('')
  const [isDisabled, setIsDisabled] = useState(true)
  const links = [
    { text: 'EULA', href: 'https://aura.wit.life/terms' },
    { text: 'Privacy Policy', href: 'https://aura.wit.life/privacy' },
  ]
  const handleValidEmail = (email: string) => {
    setEmail(email)
    setIsDisabled(false)
  }
  const handleClick = () => navigate(routes.client.subscription())

  useEffect(() => {
    console.log('email', email)
  }, [email])

  return (
    <section className='page'>
      <Title variant='h2' className='mt-24'>
        We will email you a copy of your wallpaper for easy access.
      </Title>
      <EmailInput
        name="email"
        value={email}
        placeholder="Your Email"
        onValid={handleValidEmail}
        onInvalid={() => setIsDisabled(true)}
      />
      <p>We don't share any personal information.</p>
      <Policy links={links} sizing='medium'>
        By clicking "Continue" below, you agree to our EULA and Privacy Policy.
      </Policy>
      <MainButton label='Continue' onClick={handleClick} disabled={isDisabled} />
    </section>
  )
}

export default EmailEnterPage