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

import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
import StepHeader from "../../components/stepsHeader/StepHeader";
import techinicalInterview from "../../assets/icons/Technical_Interview.svg";
import linkIcon from "../../assets/icons/link.svg";
import { Link } from "react-router-dom";
import { useState } from "react";
import TimeSlot from "../../components/timeSlot/TimeSlot";
import { useCountdown } from "../../components/CountDownTimer/useCountdown";
import CountdownTimer from "../../components/CountDownTimer/CountdownTimer";

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

    const [isDateSet, setDate] = useState<boolean>(false);
    const [isTimeSlot, setTimeSlot] = useState<boolean>(false);

    const [days, hours, minutes, seconds] = useCountdown(new Date('may 7, 2022 07:00:00'));

    const getDate = () => {
        setTimeSlot(false);
        setDate(true);
    }

    const HideTimeSlot = () => {
        setTimeSlot(false);
    }

    return (
        <IonPage>
            <StepHeader stepNumber={3} roundName="Technical Interview" />
            <IonContent className={styles.techinicalInterviewContent}>
                <div className={styles.description}>
                    <IonIcon src={techinicalInterview} />
                    {
                        !isDateSet ?
                            <div className={styles.meet}>
                                <h4>You seem interesting! Let's meet.</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
                                </p>
                            </div>
                            :
                            <div className={styles.countdown}>

                                <h4>Let's Meet in:</h4>
                                <div className={styles.timeLeft}>
                                    <CountdownTimer
                                        days={days}
                                        hours={hours}
                                        minutes={minutes}
                                        seconds={seconds} />
                                </div>
                                <h4>Join us on Google Meet</h4>
                                <div className={styles.icon}>
                                    <IonIcon src={linkIcon} />
                                </div>
                            </div>
                    }
                </div>
                {
                    !isDateSet ?
                        <div className={styles.techinicalInterviewBtn} onClick={() => setTimeSlot(true)}>
                            <IonButton shape="round" expand='block'>Find a slot</IonButton>
                        </div>
                        :
                        <div className={styles.buttonHolder}>
                            <Link to="/interviewRounds" className={styles.dashboardButton}>
                                <IonButton shape="round">Goto Dashboard</IonButton>
                            </Link>
                            <Link to="/technicalInterview/techinicalInterviewResults" className={styles.nextStepButton}>
                                <IonButton shape="round">Goto Next Step</IonButton>
                            </Link>
                        </div>
                }

                {
                    isTimeSlot &&
                    <TimeSlot
                        month="April-May"
                        getDate={getDate}
                        HideTimeSlot={HideTimeSlot} />
                }

            </IonContent>
        </IonPage >
    );
}

export default TechnicalInterview;