import React from 'react'
import { Box, Typography, unityTheme } from '@ntpkunity/controls'
import { ControlWrap } from './emailVerificationLinkStyle'
import { IEmailVerificationLink } from './emailVerificationLink.types'
import { resendLinkService } from '../../services/index'

export const EmailVerificationLinkComponent: React.FC<IEmailVerificationLink> = ({ setResponse, email, verificationScreenUrl }) => {
  
  const sendLink = (): void => {
    const data = { email, verification_url: verificationScreenUrl }
    resendLinkService(data).then(res => {
      setResponse({ data: res.data, status: res.status, message: 'Email Verification link has been sent.' })
    }).catch(error => {
      setResponse({ message: error?.response?.data?.detail, status: error?.response?.status, data: null })
    })
  }

  return (
    <ControlWrap theme={unityTheme} className="control-wrap">
      {/* <Box theme={unityTheme} mb={4}>
        <Button defaultBtn theme={unityTheme} startIcon={<Icon name="IconLeftArrow" />} text='Go Back' />
      </Box> */}
      <Typography theme={unityTheme} variant="h2" component='h2'>
        Verification Email Sent
      </Typography>
      <Box theme={unityTheme} className="scrollable-content" pt={4}>
        <Typography className='text-muted' theme={unityTheme} variant='body1' component='p'>A verification email has been sent to <span className='text-dark'>{email}.</span> Please click the link in the email to continue your sign up process. The verification link is valid for <span className='text-dark'>30 minutes.</span></Typography>
        <Typography mt={2} theme={unityTheme} className='text-muted' variant='body1' component='p'>Didn’t receive verification email? <a href='javascript:void(0)' onClick={sendLink} className="decoration-none text-primary">Resend</a></Typography>
      </Box>
    </ControlWrap>
  )
}

export default EmailVerificationLinkComponent
