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";

interface dates {
    date: string;
    day: string;
}

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

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

    const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];

    const dates: dates[] = [
        {
            date: "27",
            day: "Tue"
        },
        {
            date: "29",
            day: "Sat"
        },
        {
            date: "01",
            day: "Mon"
        },
        {
            date: "03",
            day: "Wed"
        },
    ];

    const getDate = (date: string) => {
        console.log(date);
        setTimeSlot(false);
        setDate(true);
    }

    return (
        <IonPage>
            <StepHeader stepNumber={3} roundName="Technical Interview" />
            <IonContent>
                <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}>
                                    <h4 className={styles.time}>02 : 04 : 25 : 53</h4>
                                    <div className={styles.days}>
                                        <div>Days</div>
                                        <div>Hrs</div>
                                        <div>Mins</div>
                                        <div>Secs</div>
                                    </div>
                                </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="/assignment" className={styles.nextStepButton}>
                                <IonButton shape="round">Goto Next Step</IonButton>
                            </Link>
                        </div>
                }

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

            </IonContent>
        </IonPage >
    );
}

export default TechnicalInterview;