import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { actions, RootState } from '../../store'
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 { t } = useTranslation()
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const email = useSelector((state: RootState) => state.email)
  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) => {
    dispatch(actions.email.update(email))
    setIsDisabled(false)
  }
  const handleClick = () => navigate(routes.client.subscription())

  return (
    <section className='page'>
      <Title variant='h2' className='mt-24'>{t('weWillEmailYou')}</Title>
      <EmailInput
        name="email"
        value={email}
        placeholder={t('yourEmail')}
        onValid={handleValidEmail}
        onInvalid={() => setIsDisabled(true)}
      />
      <p>{t('weDontShare')}</p>
      <Policy links={links} sizing='medium'>{t('continueAgree')}</Policy>
      <MainButton label={t('continue')} onClick={handleClick} disabled={isDisabled} />
    </section>
  )
}

export default EmailEnterPage