"use client";

import PageHeader from "@/components/Application/Common/PageHeader";
import AppMainContainer, {AppInnerContentContainer} from "@/components/Application/Common/AppMainContainer";
import {Calendar as Calendar2} from "@/components/ui/calendar"
import React from "react";
import NoAppointmentsContainer from "@/components/Application/Common/Calendar/NoAppointmentsContainer";
import CalendarAppointmentItem from "@/components/Application/Common/Calendar/CalendarAppointmentItem";
import HiddenScrollbar from "@/components/Application/Common/Session/HiddenScrollbar";

export default function Calendar() {

    const [date, setDate] = React.useState<Date | undefined>(new Date())
    const [shouldShow, setShouldShow] = React.useState<boolean>(false)
    const onDateSelected = (selectedDate?: Date) => {
        setDate(selectedDate)
        if (selectedDate) {
            setShouldShow(selectedDate?.getDate() % 2 === 0)
        }
    }

    return (
        <AppMainContainer>
            {/* page header */}
            <PageHeader header={"Calendar Appointments"}/>

            <HiddenScrollbar>

                <AppInnerContentContainer className={"flex flex-col md:flex-row gap-4"}>

                    <div className={"grow-0 w-fit"}>

                        <Calendar2
                            mode="single"
                            selected={date}
                            onSelect={onDateSelected}
                            className="rounded-md border shadow grow-0"
                        />
                    </div>

                    <div className={"grow"}>

                        {shouldShow ? <CalendarAppointmentItem/> : <NoAppointmentsContainer/>}

                    </div>


                </AppInnerContentContainer>

            </HiddenScrollbar>

        </AppMainContainer>
    )
}