from nicegui import ui
from datetime import datetime
import database


def build_ui():
    ui.colors(primary='#e30013') #Firetruck Red
    with ui.card().classes("w-full h-25").style("background-color: #e30013"):
        dark = ui.dark_mode(True)
        
        ui.image('gui/logo.png').classes('absolute top-4 right-4 w-55')
    with ui.row().classes("w-full"):
        with ui.card():
            # ATS Träger Dropdown Menü
            traeger = database.get_ats_names()
            input_name = ui.select(label="ATS Träger Name", options=traeger, with_input=True).classes('w-full')
            # Einsatzname
            input_location = ui.input(label='Einsatzort', placeholder='Adresse, oder Beschreibung').classes("w-full")

            with ui.row().classes('gap-10'):
                # --- Der DATUMS-PICKER (Pop-Up) ---
                today = datetime.now().strftime("%Y-%m-%d")

                with ui.input('Datum', value=today).classes('flex-1') as date_input:
                    # Das Icon im Eingabefeld (zum Klicken)
                    with date_input.add_slot('append'):
                        ui.icon('event').classes('cursor-pointer') \
                            .on('click', lambda: menu.open()) # Öffnet das Menü
                    # Das Pop-Up Menü mit dem Kalender
                    with ui.menu() as menu:
                        input_date = ui.date().bind_value(date_input)

                # --- Zeit Eingabe in Minuten ---
                input_time = ui.number(label="Dauer (Min)", value=0).classes('flex-1')

            with ui.row().classes("gap-10 w-full items-center"):
                input_type = ui.toggle(["Einsatz", "Übung"]).classes('flex-1 center')
                input_device = ui.select(["ATS Gerät 1", "ATS Gerät 2"], label="ATS Gerät auswählen").classes('flex-1')

            def InputDataToTable():
                name = input_name.value
                location = input_location.value
                date = input_date.value
                time = input_time.value
                etype = input_type.value
                device = input_device.value
                database.add_data_to_einsaetze(name, location, date, time, etype, device)
                print (name, location, date, time)

                einsaetze_table.rows = database.get_einsaetze()
                einsaetze_table.update()

                ui.notify("Eintrag in Datenbank erstellt.")

            def ClearForm():
                input_name.value = ""
                input_location.value = ""
                input_date.value = today
                input_time.value = 0
                input_type.value = 0
                input_device.value = 0
                ui.notify("Gelöscht.")

            ui.separator()
            ui.space()
            with ui.row().classes('w-full'):
                ui.button(text="Leeren", on_click=ClearForm)
                ui.space()
                ui.button(text="Eintragen", on_click=InputDataToTable)


        with ui.card().classes('flex-1 h-[85vh] p-0'):
            collums = [
                {'name': 'date', 'label': 'Datum', 'field': 'date', 'sortable': True, 'align': 'left'},
                {'name': 'name', 'label': 'Name', 'field': 'name', 'sortable': True, 'align': 'left'},
                {'name': 'location', 'label': 'Ort', 'field': 'location', 'align': 'left'},
                {'name': 'time', 'label': 'Dauer', 'field': 'time'},
                {'name': 'etype', 'label': 'Art', 'field': 'etype'},
                {'name': 'device', 'label': 'Gerät', 'field': 'device'},
            ]
            einsaetze_table = ui.table(
                columns = collums,
                rows = database.get_einsaetze(),
                row_key = "id"
            ).classes("w-full h-full")

    ui.switch('Dark mode').bind_value(dark)