import { IonContent, IonButton, IonToast } from '@ionic/react';
import { lockOpenOutline } from 'ionicons/icons';
import React, { useState } from 'react';
import InputWidget from '../../components/input/InputWidget';
import styles from './EnterOTP.module.scss';
import loginStyles  from '../../commonStyles/loginFlow/LoginStyles.module.scss';



type Props = { };

const EnterOTPView: React.FC<Props> = () => {

    const [successState, setSuccessState] = useState(false);

    return(
            <IonContent>
                <section className={loginStyles.upfold}>
                    <div className={loginStyles.container}>
                        <figure>
                            <img src='assets/images/welcome/upfold.svg' alt='upfold image'/>
                        </figure>
                        <h2> Enter New Password </h2>
                        <p>Your password must be at least 6 characters.</p>
                    </div>
                </section>
                <section className={styles.inputForm}>
                    <div className={styles.input}>
                        <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Enter your new password'} />
                    </div>
                    <div className={styles.input}>
                        <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Confirm new password'} />
                    </div>
                    <div className={styles.info}>
                        <p>(i) Do not enter any of the old passwords, system will reject the repeated passwords.</p>
                    </div>
                    <div className={styles.actionButtonsHolder}>
                        <IonButton className={`${styles.actionButton}`} expand='block' onClick={()=>setSuccessState(true)}> Change </IonButton>
                        <IonToast
                            isOpen={successState}
                            onDidDismiss={() => setSuccessState(false)}
                            header= 'Success!'
                            message="You have successfully changed your password. Please use your newly set password"
                            // duration={2000}
                            cssClass={loginStyles.successToast}
                        />
                    </div>
                </section>
               
            </IonContent>

    )

}

export default EnterOTPView;