package addview

import "github.com/tigorlazuardi/redmage/views/utils"
import "fmt"
import "strconv"

type ScheduleInputData struct {
	Value     string
	Error     string
	Valid     string
	Disabled  bool
	HXSwapOOB string
}

templ scheduleInputContainer() {
	@ScheduleInput(ScheduleInputData{})
	<datalist id="cron-templates">
		<option value="@hourly">Every hour</option>
		<option value="@daily">Every day at midnight</option>
		<option value="@weekly">Every Sunday at midnight</option>
		<option value="@monthly">Every start of month</option>
		<option value="@yearly">Every start of year</option>
		<option value="@annually">Every start of year</option>
		<option value="0 0 * * MON">Every Monday at midnight</option>
		<option value="0 0 * * TUE">Every Tuesday at midnight</option>
		<option value="0 0 * * WED">Every Wednesday at midnight</option>
		<option value="0 0 * * THU">Every Thursday at midnight</option>
		<option value="0 0 * * FRI">Every Friday at midnight</option>
		<option value="0 0 * * SAT">Every Saturday at midnight</option>
		<option value="0 0 * * SUN">Every Sunday at midnight</option>
		for i := 1; i  < 24; i++ {
			<option value={ fmt.Sprintf("0 %d * * *", i) }>Every day at { strconv.Itoa(i) } o'clock</option>
		}
	</datalist>
	<script>
        document.addEventListener('DOMContentLoaded', () => htmx.trigger('#schedule-input-group', 'change'))
    </script>
}

templ ScheduleInput(data ScheduleInputData) {
	<div
		id="schedule-input-group"
		class="form-control w-full"
		hx-get="/htmx/subreddits/validate/schedule"
		hx-trigger="change"
		hx-include="this"
		hx-swap="outerHTML"
		hx-swap-oob={ data.HXSwapOOB }
	>
		<label for="schedule" class="label">
			<span
				class={ utils.CX(map[string]bool{
                        "label-text": true,
                        "text-error": data.Error != "",
                        "text-success": data.Valid != "",
                        "text-base": true,
                    }) }
			>Schedule</span>
			<div class="tooltip tooltip-left" data-tip="Whether to enable the scheduler or not">
				if data.Disabled {
					<input type="checkbox" name="enable_schedule" value="1" class="toggle toggle-primary my-auto"/>
				} else {
					<input type="checkbox" name="enable_schedule" value="1" class="toggle toggle-primary my-auto" checked/>
				}
			</div>
		</label>
		if data.Disabled {
			<input
				id="schedule"
				name="schedule"
				type="text"
				placeholder="e.g. '@daily' or '0 0 * * MON'"
				class="input input-bordered"
				disabled
			/>
		} else {
			<input
				id="schedule"
				name="schedule"
				type="text"
				placeholder="e.g. '@daily' or '0 0 * * MON'"
				value={ data.Value }
				class={ utils.CX(map[string]bool{
                    "input": true,
                    "input-bordered": true,
                    "input-error": data.Error != "",
                    "text-error": data.Error != "",
                    "input-success": data.Valid != "",
                    "text-success": data.Valid != "",
                }) }
				data-error={ data.Error }
				hx-on::load="this.setCustomValidity(this.getAttribute('data-error'))"
				list="cron-templates"
				required
			/>
		}
		<div class="label">
			<span
				class={ utils.CX(map[string]bool{
                            "label-text": true,
                            "text-error": data.Error != "",
                            "text-success": data.Valid != "",
                            "min-h-[1rem]": true,
                        }) }
			>
				if data.Valid != "" {
					{ data.Valid }
				} else if data.Error != "" {
					{ data.Error }
				} else if !data.Disabled {
					Uses cron syntax. Tip: Start by typing 'every' to get suggestions or search custom expressions via Google like 'cron every 6 hours'.
				}
			</span>
		</div>
	</div>
}