import styles from "./SubmitAssignment.module.scss";
import { IonButton, IonContent, IonIcon, IonPage, useIonToast } from "@ionic/react"
import assignmentImage from "../../assets/icons/Assignment.svg";
import StepHeader from "../../components/stepsHeader/StepHeader";
import Input from "../../components/formInput/Input";
import { linkOutline } from 'ionicons/icons';
import { Link } from "react-router-dom";
import { useState } from "react";

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

    const [isInput, setIsInput] = useState(false);
    const [present, dismiss] = useIonToast();

    const isInputSet = (isSet: boolean) => {
        setIsInput(isSet);
    }


    const showToast = () => {
        if (!isInput) {
            present({
                buttons: [{ text: 'close', handler: () => dismiss() }],
                message: 'insert project link to submit',
                duration: 2000
            })
        }
    }

    return (
        <IonPage>
            <StepHeader roundName="Assignment" stepNumber={4} />

            <IonContent className={styles.submitAssignment}>

                <div className={styles.description}>
                    <div className={styles.icon}>
                        <IonIcon src={assignmentImage} />
                    </div>

                    <div className={styles.stepDescription}>
                        <h4>Submit your Assignment</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>

                <div className={styles.inputHolder}>
                    <Input
                        placeholder="Insert the project Link"
                        icon={linkOutline}
                        isInputSet={isInputSet} />
                </div>
                <Link to={isInput ? "/ReviewAssignment" : "/SubmitAssignment"}
                    className={styles.submitAssigment}
                    onClick={showToast}>
                    <IonButton shape="round" expand='block'>Submit</IonButton>
                </Link>

            </IonContent>
        </IonPage>
    );
}

export default SubmitAssignment;