import React from 'react'
import { Box, Typography, unityTheme } from '@ntpkunity/controls'
import { ControlWrap } from './resetPasswordLinkStyle'
import { IResetPasswordLinkProps } from './resetPasswordLinkComponent.types'
import { forgotPasswordService } from '../../services/index'

export const ResetPasswordLinkComponent: React.FC<IResetPasswordLinkProps> = ({ email, setResponse, nextScreenUrl }) => {

  const sendLink = (): void => {
    const data = { email, resetPasswordScreenUrl: nextScreenUrl }
    forgotPasswordService(data).then(res => {
      setResponse({ data: res.data, status: res.status })
    }).catch(error => {
      setResponse({ message: error?.response?.data?.detail, status: error?.response?.status })
    })
  }

  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'>
        Password Reset Link Sent
      </Typography>
      <Box theme={unityTheme} className="scrollable-content" pt={4}>
        <Typography className='text-muted' theme={unityTheme} variant='body1' component='p'>A password reset email has been sent to <span className='text-dark'>{email}.</span> Please click the link in the email to update your password. The reset 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 reset password email? <a href='javascript:void(0)' onClick={sendLink} className="decoration-none text-primary">Resend</a></Typography>
      </Box>
    </ControlWrap>
  )
}

export default ResetPasswordLinkComponent
