package templates

import (
	"arbeitszeitmessung/models"
	"strconv"
	"time"
)

templ changeButtonComponent(id string, workDay bool) {
	<button class="h-10 change-button-component btn w-auto group/button" type="button" onclick={ templ.JSFuncCall("editWorkday", templ.JSExpression("this"), templ.JSExpression("event"), id, workDay) }>
		<p class="hidden md:block group-[.edit]/button:hidden">Ändern</p>
		<p class="hidden group-[.edit]/button:md:block">Speichern</p>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 md:hidden">
			<path class="group-[.edit]/button:hidden md:hidden" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"></path>
			<path class="hidden group-[.edit]/button:block md:hidden" d="M12.736 3.97a.733.733 0 0 1 j1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
		</svg>
	</button>
	<button class="h-10 hidden group-[.edit]:flex btn  basis-[content] items-center" onclick={ templ.JSFuncCall("clearEditState") }><span class="size-5 icon-[material-symbols-light--cancel-outline]"></span></button>
}

templ newAbsenceComponent() {
	<div class="no-booking-component hidden group-[.edit]:flex flex-col gap-2 align-center ">
		<button type="button" name="absence" onclick={ templ.JSFuncCall("editWorkday", templ.JSExpression("this"), templ.JSExpression("event"), 0, false) } class="btn border-neutral-500">
			Neue Abwesenheit
		</button>
	</div>
}

templ absenceComponent(a *models.Absence, isKurzarbeit bool) {
	{{
		editBox := ""
		if isKurzarbeit {
			editBox = "edit-box"
		}
	}}
	<div class={ "flex flex-row items-center gap-2", editBox }>
		@absentInput(a)
		<p class="whitespace-nowrap group-[.edit]:ml-2">
			{ a.ToString() }
			if a.IsMultiDay() {
				<span class="text-neutral-500">bis { a.DateTo.Format("02.01.2006") }</span>
			}
		</p>
		<div class="w-full"></div>
		if isKurzarbeit {
			<button type="button" onclick={ templ.JSFuncCall("editWorkday", templ.JSExpression("this"), templ.JSExpression("event"), "time-"+a.Date().Format(time.DateOnly), false) } class="hidden btn border-0 rounded-none grow-0 w-auto group-[.edit]:inline">Bearbeiten</button>
		}
	</div>
}

templ absentInput(a *models.Absence) {
	<input type="hidden" name="date_from" value={ a.DateFrom.Format(time.DateOnly) }/>
	<input type="hidden" name="date_to" value={ a.DateTo.Format(time.DateOnly) }/>
	<input type="hidden" name="aw_type" value={ a.AbwesenheitTyp.Id }/>
	<input type="hidden" name="aw_id" value={ a.CounterId }/>
}

//js function to select the right entry
templ newBookingComponent(d models.IWorkDay) {
	<div class="new-booking-component hidden group-[.edit]:flex flex-row gap-2 items-center edit-box border-dashed" id={ "nb" + d.Date().Format(time.DateOnly) }>
		<input name="timestamp" type="time" value={ time.Now().Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm px-3 py-2 cursor-pointer"/>
		<input name="date" type="hidden" value={ d.Date().Format(time.DateOnly) }/>
		<div class="relative">
			<select class="cursor-pointer appearance-none" name="check_in_out">
				<option value="0" disabled>Kommen/Gehen</option>
				<option value="3">Kommen</option>
				<option value="4">Gehen</option>
			</select>
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="h-5 w-5 ml-1 absolute right-1 top-[0.125rem] text-slate-700">
				<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"></path>
			</svg>
		</div>
		<div class="w-full"></div>
		<button name="action" value="add" type="submit" class="hidden btn border-0 rounded-none grow-0 w-auto group-[.edit]:inline"><span class="hidden md:inline">Hinzufügen</span><span class="md:hidden">+</span></button>
	</div>
}

templ bookingComponent(booking models.Booking) {
	<div>
		<p class="text-neutral-500 edit-box">
			<span class="text-black group-[.edit]:hidden inline">{ booking.Timestamp.Format("15:04") }</span>
			<input disabled name={ "booking_" + strconv.Itoa(booking.CounterId) } type="time" value={ booking.Timestamp.Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm px-3 py-2 cursor-pointer"/>
			{ booking.GetBookingType() }
		</p>
		if booking.IsSubmittedAndChecked() {
			<p>submitted</p>
		}
	</div>
}

templ workdayComponent(workDay *models.WorkDay) {
	if len(workDay.Bookings) < 1 {
		<p class="text group-[.edit]:hidden">Keine Buchung gefunden. Bitte Arbeitsstunden oder Grund der Abwesenheit eingeben!</p>
	} else {
		if workDay.IsKurzArbeit() && len(workDay.Bookings) > 0 {
			@absenceComponent(workDay.GetKurzArbeit(), true)
		}
		for _, booking := range workDay.Bookings {
			@bookingComponent(booking)
		}
		<input type="hidden" name="select_kommen" value={ len(workDay.Bookings) > 0 && workDay.Bookings[len(workDay.Bookings)-1].CheckInOut%2 == 0 }/>
	}
}

templ holidayComponent(d models.IWorkDay) {
	<p>{ d.ToString() }</p>
}