# dashboard/pages/appointments.py
from dash import html, dcc
import dash
from dash_using_fullcalendar import DashUsingFullcalendar
import dash_bootstrap_components as dbc
from dashboard.components.appointment_modal import get_appointment_modal

dash.register_page(__name__, path="/appointments", name="Termine")

layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.H2("Dash FullCalendar"))
    ]),
    # Button zum Öffnen der Modalbox
    dbc.Row([
        dbc.Col(
            dbc.Button(
                "Neuen Termin anlegen",
                id="open-appointment-modal-btn",
                color="primary",
                className="mb-3"
            )
        )
    ]),
    dbc.Row([
        dbc.Col(
            DashUsingFullcalendar(
                id='calendar',
                events=[],
                initialView="timeGridWeek",
                headerToolbar={
                    "left": "prev,next today",
                    "center": "title",
                    # "right": "dayGridMonth,timeGridWeek,timeGridDay"
                },
                height=600,
                locale="de",
                slotDuration="00:30:00",
                slotMinTime="00:00:00",
                slotMaxTime="24:00:00",
                scrollTime="07:00:00",
                weekends=True,
                allDaySlot=False,
                firstDay=1,
                # themeSystem kann auf "bootstrap5" gesetzt werden, wenn das Plugin eingebunden ist
                # themeSystem="bootstrap5"
            )
        )
    ]),
    dbc.Row([
        dbc.Col(html.Div(id='output'))
    ]),
    dbc.Row([
        dbc.Col(html.Div(id='event-output'))
    ]),
    dbc.Row([
        dbc.Col(html.Div(id='select-output'))
    ]),
    dbc.Row([
        dbc.Col(html.Div(id='modal-output', children=get_appointment_modal()))
    ])
], fluid=True)