import styles from "./ClosingDocs.module.scss";

import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
import StepHeader from "../../components/stepsHeader/StepHeader"
import closingDocsImg from '../../assets/icons/Closing_Docs.svg';
import uploadIcon from "../../assets/icons/upload.svg";
import checkIcon from "../../assets/icons/check.svg";
import { useState } from "react";
import { Link } from "react-router-dom";


const ClosingDocs: React.FC = () => {

    const [isUploaded, setUploaded] = useState<boolean>(false);

    return (
        <IonPage>
            <StepHeader roundName="Closing Docs" stepNumber={6} />
            <IonContent className={styles.closingDocsContent}>
                <div className={styles.closingDocs} >

                    <IonIcon src={closingDocsImg} className={styles.closingDocsImg} />
                    <h4 className={styles.docsHeader}>Upload your docs to join our team</h4>
                    {/* <div> */}
                    <div className={styles.docsSubHeader}>Gather all documents as mentioned below:</div>
                    <div className={styles.uploadDocsHolder}>
                        <div className={styles.docs}>
                            <div className={styles.docsName}>ID proof(Aadhar)</div>
                            {!isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
                            </div>}
                            {isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={checkIcon} />
                            </div>}
                        </div>
                        <div className={styles.docs}>
                            <div className={styles.docsName}>convocation certificate</div>
                            {!isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
                            </div>}
                            {isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={checkIcon} />
                            </div>}
                        </div>
                        <div className={styles.docs}>
                            <div className={styles.docsName}>Experience Letter</div>
                            {!isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
                            </div>}
                            {isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={checkIcon} />
                            </div>}
                        </div>
                        <div className={styles.docs}>
                            <div className={styles.docsName}>Last 3 months Payslips</div>
                            {!isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
                            </div>}
                            {isUploaded && <div className={styles.iconBorder}>
                                <IonIcon src={checkIcon} />
                            </div>}
                        </div>
                    </div>
                    {/* </div> */}

                    <Link to="/"
                        className={styles.closingDocsButton + " " + (isUploaded && styles.active)}>
                        <IonButton shape="round" expand='block'>Proceed</IonButton>
                    </Link>
                </div>
            </IonContent>
        </IonPage>
    );
}

export default ClosingDocs;