const semesterStart = document.getElementById("startDate").value;
const semesterEnd = document.getElementById("endDate").value;
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const dpParams = {};


const dp = new DayPilot.Month("dp", {
    locale: "en-gb",
    allowMultiSelect: false,
    eventBarVisible: false,
    eventTextWrappingEnabled: true,
    timeRangeSelectedHandling: "Enabled",
    eventDeleteHandling: "Update",
    eventMoveHandling: "Update",
    eventResizeHandling: "Disabled",
    eventClickHandling: "Disabled",
    onTimeRangeSelect: async (args) => {
        args.end = args.start.addDays(1);
        if (args.start < new DayPilot.Date(semesterStart)) {
            ShowAlert("Cannot add an event before the Semester start date", "warning");
            args.preventDefault();
        }
        if (args.end > new DayPilot.Date(semesterEnd)) {
            ShowAlert("Cannot add an event after the Semester end date", "warning");
            args.preventDefault();
        }
    },
    onTimeRangeSelected: async (args) => {
        const dp = args.control;

        //check that a staff member is selected
        if (!dpParams.staff_id) {
            ShowAlert("You must select a member of staff.", "warning");
            return;
        }
        //check for attempt to create event in sunday and fail
        if (args.start.getDayOfWeek() === 0) {
            ShowAlert("You cannot create a record on Sunday", "warning");
            return;
        }
        let checkDate = args.start;
        while (checkDate <= args.end.addDays(-1)) {
            if (checkDate.getDayOfWeek() === 0) {
                ShowAlert("Cannot create a record that includes a Sunday", "warning");
                return;
            }
            checkDate = checkDate.addDays(1);
        }
        //check for existing events and fail if we find any
        //const e = dp.events.find((e) => e.start() <= args.start && e.end() > args.start);
        //if (e !== null) {
        //    console.log("There is a record on this date already");
        //    return;
        //}
        const dayText = (args.start.addDays(1) === args.end)
            ? `on ${args.start.toString("dd/MM/yyyy")}`
            : `from ${ args.start.toString("dd/MM/yyyy") } to ${ args.end.toString("dd/MM/yyyy") }`;
        document.getElementById("title_coursesModal").innerHTML = `Record hours for ${dpParams.first_name} ${dpParams.last_name} ${dayText}`;

        dpParams.start = args.start;
        dpParams.end = args.end;

        await coursesModal.show();
    },
    onEventDeleted: async (args) => {
        console.log("Event deleted: " + args.e.text());
        const id = args.e.id();
        const { data: result } = await DayPilot.Http.delete(`/api/events/${id}`);
        if (result.pth_staff_id) {
            staffTableRedraw();
        }
    },
    onEventResize: async (args) => {
        console.log("Event resized: " + args.e.text());
        const params = {
            id: args.e.id(),
            start: args.newStart,
            end: args.newEnd
        };
        const id = args.e.id();
        await DayPilot.Http.put(`/api/events/${id}/move`, params);
    },
    onEventMove: async (args) => {
        console.log("Event resized: " + args.e.text());
        const params = {
            id: args.e.id(),
            start: args.newStart,
            end: args.newEnd
        };
        const id = args.e.id();
        await DayPilot.Http.put(`/api/events/${id}/move`, params);
    },
    onBeforeEventRender: async (args) => {
        console.log(args);
        const color = args.data.color || "#cacaca";
        args.data.backColor = color;
        args.data.borderColor = "darker";
        args.data.fontColor = "#ffffff";//  "#000000";
        args.data.cssClass = "dp-event"
    },
    onBeforeCellRender: async (args) => {
        console.log("before cell render", args);
    },
    onAfterRender: async (args) => {
        console.log("after render", args);
    },
    contextMenu: new DayPilot.Menu({
        items: [
            {
                text: "Delete", onClick: async (args) => {
                    const e = args.source;
                    console.log("delete", e.id());
                    const { data: result } = await DayPilot.Http.delete(`/api/events/${e.id()}`);
                    e.calendar.events.remove(args.source);
                    if (result.pth_staff_id) {
                        staffTableRedraw();
                    }
                }
            },
            {
                text: "Make recurring", onClick: async (args) => {
                    const e = args.source;
                    modalData = {
                        id: e.id(),
                        start: e.data.start,
                        module: e.data.text,
                        end: semesterEnd
                    };
                    confirmRecurrence(modalData, async (data) => {
                        console.log("ans", data);
                        if (data) {
                            await DayPilot.Http.post("/api/Recurring", data);
                            staffTableRedraw()
                        }
                    });
                    
                }
            },
            {
                text: "Change hours", onClick: async (args) => {
                    const e = args.source;
                    console.log("hours", e);
                    modalData = {
                        id: e.id(),
                        hours: e.data.hours,
                        module: e.data.text
                    };
                    confirmHours(modalData, async (data) => {
                        console.log("ans", data);
                        if (data) {
                            await DayPilot.Http.post("/api/HoursUpdate", data);
                            staffTableRedraw()
                        }
                    });
                }
            }
        ]
    })
});
dp.events.list = [];
//dp.heightSpec = "Parent100Pct";
dp.cellMarginBottom = 10;
//dp.minCellHeight = 50;
dp.init();
setMonthButtons();

document.getElementById("btn_courseModal_save").addEventListener("click", async event => {
    const data = Validated("courseInput");
    if (data) {
        dp.clearSelection();
        dpParams.course_department = GetSelectListValue("course_department");
        dpParams.agresso_code = data.agresso_code;
        dpParams.hours = data.module_hours;
        if (document.getElementById("custom_course_check").checked) {
            dpParams.custom_module_name = data.custom_module_name;
            dpParams.program_code = null;
            dpParams.program_title = null;
            dpParams.module_long = null;
            dpParams.online = false;

        } else {
            let selectList = document.getElementById("module_long");
            dpParams.custom_module_name = null;
            dpParams.program_code = data.program_code;
            dpParams.program_title = data.program_title;
            dpParams.module_long = data.module_long;
            dpParams.online = selectList.options[selectList.selectedIndex].classList.contains("online");
        }
        try {
            const { data: result } = await DayPilot.Http.post("/api/events", dpParams);
            result.tags = dpParams;
            dp.events.add(result);
            coursesModal.hide();
        } catch (error) {
            console.log(error);
        }

    }
});
document.getElementById("nextMonth").addEventListener("click", function () {
    dp.update({
        startDate: dp.startDate.addMonths(1)
    });
    setMonthButtons();

    const data = staffTable.row({ selected: true }).data();
    if (data) {
        dp.events.load(`/api/events?pth_staff_id=${data.id}`);
    }
});
document.getElementById("previousMonth").addEventListener("click", function () {
    dp.update({
        startDate: dp.startDate.addMonths(-1)
    });
    setMonthButtons();
    
    const data = staffTable.row({ selected: true }).data();
    if (data) {
        dp.events.load(`/api/events?pth_staff_id=${data.id}`);
    }
});
function setMonthButtons() {
    if (dp.startDate <= new DayPilot.Date(semesterStart)) {
        document.getElementById("previousMonth").disabled = true;
    } else {
        document.getElementById("previousMonth").disabled = false;
    }
    if (dp.endDate >= new DayPilot.Date(semesterEnd)) {
        document.getElementById("nextMonth").disabled = true;
    } else {
        document.getElementById("nextMonth").disabled = false;
    }
}
function staffTableRedraw() {
    index = 0;
    staffTable
        .search("")
        .draw();
}
function confirmRecurrence(data, handler) {
    const start = new DayPilot.Date(data.start);
    const day = days.at(start.dayOfWeek());
    const min = start.addDays(7).toString("yyyy-MM-dd");
    $(`<div class="modal" id="recurringEventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm recurring hours</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to repeat the ${data.module} event every ${day} until</p>
                <input type="date" class="form-control form-control-sm" id="recurringEventUntil" min="${min}" max="${data.end}" value="${data.end}" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="recurringEventNo">No</button>
                <button type="button" class="btn btn-primary" id="recurringEventYes">Yes</button>
            </div>
        </div>
    </div>
    </div>`).appendTo("body");

    const recurringEventModalElement = document.getElementById("recurringEventModal");
    const recurringEventModal = new bootstrap.Modal(recurringEventModalElement, {
        backdrop: "static",
        keyboard: false
    });
    recurringEventModalElement.addEventListener("hidden.bs.modal", function (event) {
        recurringEventModalElement.remove();
    });
    recurringEventModal.show();

    document.getElementById("recurringEventYes").addEventListener("click", function (event) {
        data.end = document.getElementById("recurringEventUntil").value
        handler(data);
        recurringEventModal.hide()
    });

    document.getElementById("recurringEventNo").addEventListener("click", function (event) {
        handler(false);
        recurringEventModal.hide()
    });
}
function confirmHours(data, handler) {
    $(`<div class="modal" id="hoursEventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm change of hours</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to change the hours for the ${data.module} event from ${data.hours} hours?</p>
                <div class="form-floating">
                    <input type="number" is="decimal-number" data-places="2" min="0" step="0.5" class="form-control form-control-sm" id="new_module_hours" required value="${data.hours}" />
                    <label for="module_hours">New Hours</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="hoursEventNo">No</button>
                <button type="button" class="btn btn-primary" id="hoursEventYes">Yes</button>
            </div>
        </div>
    </div>
    </div>`).appendTo("body");

    const hoursEventModalElement = document.getElementById("hoursEventModal");
    const hoursEventModal = new bootstrap.Modal(hoursEventModalElement, {
        backdrop: "static",
        keyboard: false
    });
    hoursEventModalElement.addEventListener("hidden.bs.modal", function (event) {
        hoursEventModalElement.remove();
    });
    hoursEventModal.show();

    document.getElementById("hoursEventYes").addEventListener("click", function (event) {
        data.hours = document.getElementById("new_module_hours").value;
        handler(data);
        hoursEventModal.hide()
    });

    document.getElementById("hoursEventNo").addEventListener("click", function (event) {
        handler(false);
        hoursEventModal.hide()
    });
}