import React, { useEffect } from 'react'
import {  Row, Card } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import {
    unsubscribeEmail
} from '../actions/index'
import Loader from '../components/common/Loader'
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; 
import { useLocation } from 'react-router'



const Unsubscribe = () =>  {
  const dispatch = useDispatch()
  const search = useLocation().search
  useEffect(() => {
    const email = new URLSearchParams(search).get('email');
    const token = new URLSearchParams(search).get('token');
    dispatch(unsubscribeEmail(email,token))
  },[search, dispatch]);
  const unsubscribe = useSelector((state) => state.base.unsubscribe);
  const {
      isDone,
      success,
      email,
  } = unsubscribe;
  return (
    <Row className={'padding--sides width-100 height-100'}>
      <Card className='border-round padding--sides padding--ends margin--ends background-grey center' style={{width: '100%'}}>
        {
          isDone ?
          success ?
          <>
            <CheckCircleOutlined className='f72 text-green' />
            <div className='text-black center margin--top f18'>
              You have successfully unsubscribed! Your email {email} will no longer receive notifications. Redirecting to homepage...
            </div>
          </> :
          <>
            <CloseCircleOutlined className='f72 text-red' />
            <div className='text-black center margin--top f18'>
              Something went wrong and we could not process your request. Please Try again.
            </div>
          </> :
          <Loader />
        }		
      </Card>
    </Row>
  )
}

export default Unsubscribe