// @ts-check
import React from 'react';
import { useHistory } from "react-router-dom";
import { Row, Col, Typography, Spin } from 'antd';
import { authenticationService } from '../../_services';
import { StopFilled } from '@ant-design/icons';

// import Carousel from './Carousel';
// import Background from './Background';

// SVG imports here
import { ReactComponent as CheckMark } from '../assets/image/Checkmark.svg';
// import logo from '../assets/image/PracticeKiaLogo.svg';
// import Feature1 from '../assets/image/feature-1.svg';
// import Feature2 from '../assets/image/feature-2.webp';

// CSS imports here
import './VerifyEmail.css';

const VerifyEmail = (props) => {

    const [loading, setLoading] = React.useState(true);
    const [status, setStatus] = React.useState(<>Verifying, please wait...</>);
    const [error, setError] = React.useState(false);
    const history = useHistory();

    React.useEffect(() => {
        authenticationService.verifyEmail(props.oobCode).then(
            data => {
                if (data) {
                    setLoading(false);
                    setStatus(<><Typography.Text strong style={{ width: '100%', textAlign: 'center' }}>{data.email}</Typography.Text> has been verified.</>)
                }
                else {
                    history.push('/login');
                }
            }
        ).catch(({ error }) => {
            if (error.message === "INVALID_OOB_CODE") setStatus(<>Please check if your verification email link is correct</>);
            if (error.message === "EXPIRED_OOB_CODE") setStatus(<>Your verification email link has expired, please try again.</>);
            if (error.message === "EMAIL_NOT_FOUND") setStatus(<>Your verification email link is incorrect, please try again.</>);
            setLoading(false);
            setError(true);
        });
    }, []);

    return (
        <Row className='verify-page'>

            <Col id='background' className='center-flex'>{/*background image here*/}
                {/* <Background /> */}
                <div className='circle-1'></div>
                <div className='circle-2'></div>
                <div className='circle-3'></div>
                {/* <Carousel imageArr={[Feature1, Feature2]} interval={3000} headings={headings} subtitles={subtitles} /> */}
                {loading ? <><Spin /><Typography.Text style={{ width: '100%', textAlign: 'center' }}>{status}</Typography.Text></>
                    : error ? <><StopFilled style={{ color: 'red', fontSize: '7.5rem', marginBottom: 16 }} />
                        <Typography.Text style={{ width: '100%', textAlign: 'center', fontSize: '1.3rem' }} >{status}</Typography.Text>
                    </>
                        : <div style={{ display: 'flex', flexDirection: 'column', rowGap: 12, justifyContent: 'center', alignItems: 'center' }}><CheckMark />
                            <Typography.Title level={3}>Congratulations!</Typography.Title>
                            {status}
                        </div>}
                
                <footer>© {new Date().getFullYear()} PracticeKea</footer>
            </Col>
            
        </Row>
    );
}

export default VerifyEmail;
