/****************

Date and Time Picker
AUTHOR: GP
2020.01.03
todo: Megnyitáskor az óra jól induljon

****************/

var currPage; //month
var year ;
var day;
var full_date = "";
var day_cnt;
var nowDay = new Date();
var secondScrollTop = 0;
var secondScrollTimer;
var secondDownScrollTimeout = false;
var secondUpScrollTimeout = false;
var minuteScrollTop = 0;
var minuteScrollTimer;
var minuteDownScrollTimeout = false;
var minuteUpScrollTimeout = false;
var hourScrollTop = 0;
var hourScrollTimer;
var hourDownScrollTimeout = false;
var hourUpScrollTimeout = false;
var ignoreScrollEvents = false;
var ignoreScrollEventsTimeout;
var scroll_elements_height = 18;
var datetimepicker_input_name = "";
var mos = ['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber'];
var days = ['Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat', 'Sun'];

function setHungarianLang()
{
    mos = ['Január','Február','Március','Április','Május','Június','Július','Augusztus','Szeptember','Október','Novemeber','Decemeber'];
    days = ['H', 'K', 'Sze' , 'Cs', 'P', 'Szo', 'V'];
}

function setSwedishLang()
{
    mos = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'];
    days = ['Må', 'Ti', 'On', 'To', 'Fr', 'Lö', 'Sö'];
}

function getVal(e){
    elements = document.getElementsByName('datetimepicker_date_buttons');
    for (let i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = 'white';
    }

    console.log("Clicked element:", e);
    let month, day;
    if (e === undefined){
        if (full_date == ""){
            nowDay = new Date();
            month = check_length_and_append_0(nowDay.getMonth() + 1);
            day = check_length_and_append_0(nowDay.getDate());
        }
        else{
            month = full_date.slice(5, 7);
            day = full_date.slice(8, 10);
        }
    }
    else{
        $('#' + e.id).css("background-color", '#8f8f8f');
        month = check_length_and_append_0(currPage);
        day = check_length_and_append_0(document.getElementById(e.id).value);
    }

//    console.log("Selected date:", year + "-" + month + "-" + day);

    // Ensure scrolling elements exist
    let hourScroll = $('#' + datetimepicker_input_name + '_hour_scroll_area');
    let minuteScroll = $('#' + datetimepicker_input_name + '_minute_scroll_area');
    let secondScroll = $('#' + datetimepicker_input_name + '_second_scroll_area');

    let hourDiv = $('#' + datetimepicker_input_name + '_hour_scrolled_div').height();
    let minuteDiv = $('#' + datetimepicker_input_name + '_minute_scrolled_div').height();
    let secondDiv = $('#' + datetimepicker_input_name + '_second_scrolled_div').height();

    // Use Math.round instead of Math.floor to avoid rounding down too much
    let hour = Math.max(0, Math.round(((hourDiv - hourScroll.scrollTop() - 2) / scroll_elements_height) - 1));
    let minute = Math.max(0, Math.round(((minuteDiv - minuteScroll.scrollTop() - 2) / scroll_elements_height) - 1));
    let second = Math.max(0, Math.round(((secondDiv - secondScroll.scrollTop() - 2) / scroll_elements_height) - 1));

    // Fix edge case: If at the last position, ensure it reaches max values
    hour = (hour > 23) ? 23 : hour;
    minute = (minute > 59) ? 59 : minute;
    second = (second > 59) ? 59 : second;

    hour = check_length_and_append_0(hour);
    minute = check_length_and_append_0(minute);
    second = check_length_and_append_0(second);

//    console.log("Corrected Time: ", hour + ":" + minute + ":" + second);

    full_date = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

//    console.log("Final full_date:", full_date);

    let elems = document.getElementsByName(datetimepicker_input_name);
    for (let i = 0; i < elems.length; i++) {
        elems[i].value = full_date;
    }
}

function close_datetimepicker(){
//    $("#" + datetimepicker_input_name).html("");
    $("#" + datetimepicker_input_name).css("display"," none");
    $("#" + datetimepicker_input_name + "_overlay").css("display"," none");
}

function close_all_opened_datetimepicker(){
//    console.log("close_all_opened_datetimepicker");
    elems = document.getElementsByName('datetimepicker_date');
    for (i = 0; i < elems.length; i++){
//        console.log(elems[i]);
//        elems[i].style.display = "none";
        console.log(elems[i].lastElementChild);
        elems[i].lastElementChild.innerHTML = "";
    }
    elems = document.getElementsByName('wg_datetimepicker_name');
    for (i = 0; i < elems.length; i++){
//        console.log(elems[i]);
        elems[i].style.display = "none";
    }
    $("#" + datetimepicker_input_name + "_overlay").css("display"," none");
}

function set_datetimepicker(){
    getVal();
    $("#" + datetimepicker_input_name).css("display"," none");
    $("#" + datetimepicker_input_name + "_overlay").css("display"," none");
}

function clear_datetimepicker(){
    full_date = ""
    elems = document.getElementsByName(datetimepicker_input_name)
    for (i = 0; i < elems.length; i++){
        elems[i].value = full_date;
    }
}


function check_length_and_append_0(element){
    el = element.toString();
    if(el.length == 1){
        el = '0' + el;
    }
    return el;
}

//function show_datetimepicker_input(e){
//    $("#" + e + "_input_area").css("display", 'block');
//    $("#" + datetimepicker_input_name + "_" + e + "_scroll_area").css("display", 'none');
//    $("#" + e + "_input_area").focus();
//}

//function show_datetimepicker_scroller(e){
//    $("#" + datetimepicker_input_name + "_" + e + "_scroll_area").css("display", 'block');
//    $("#" + e + "_input_area").css("display", 'none');
//}

function datetimepicker_input_focus_loss(e){
//    console.log(e);
    i_value = document.getElementById(e + '_input_area').value;
    show_datetimepicker_scroller(e)
    if (i_value != ""){
        i_value = parseInt(i_value);
        ignoreScrollEvents = true;
        h = $('#' + e + '_scrolled_div').height();
        if (e == "hour"){
            hourScrollTop = h - ((i_value + 1) * scroll_elements_height) - 2;
        }
        else if (e == "minute"){
            minuteScrollTop = h - ((i_value + 1) * scroll_elements_height) - 2;
        }
        else if (e == "second"){
            secondScrollTop = h - ((i_value + 1) * scroll_elements_height) - 2;
        }
        var ScrollTop = h - ((i_value + 1) * scroll_elements_height) - 2;
        $("#" + datetimepicker_input_name + "_" + e + "_scroll_area").scrollTop(ScrollTop);
    }
    ignoreScrollEventsTimeout = setTimeout(function(){
        ignoreScrollEvents = false;
    }, 500);
}

function date_mousewheel(e){
    console.log("date_mousewheel");
    if (e.deltaY < 0){
//        console.log("előző");
        $("#prev-month").trigger( "click" );
    }
    else if (e.deltaY > 0){
//        console.log("következő");
        $("#next-month").trigger( "click" );
    }

}

function reset_all(){
    currPage = 0; //month
    year;
    day;
    day_cnt;
    nowDay = new Date();
    secondScrollTop = 0;
    secondScrollTimer;
    secondDownScrollTimeout = false;
    secondUpScrollTimeout = false;
    minuteScrollTop = 0;
    minuteScrollTimer;
    minuteDownScrollTimeout = false;
    minuteUpScrollTimeout = false;
    hourScrollTop = 0;
    hourScrollTimer;
    hourDownScrollTimeout = false;
    hourUpScrollTimeout = false;
    ignoreScrollEvents = false;
    ignoreScrollEventsTimeout;
    scroll_elements_height = 18;
    datetimepicker_input_name = "";
}

function GetDatetimePickerBox(name){

}

//$(document).ready(function(){
function datetimepicker(element, from_or_to=null){
    if (navigator.userAgent.includes('Chrome') == true && element.type != "text"){
        return;
    }
//    console.log(currPage);
    reset_all();
    close_all_opened_datetimepicker()
//    console.log(currPage);
//    console.log(element);
    datetimepicker_input_name = element.name;
//    console.log(datetimepicker_input_name);
//    $('#datetimepicker_input').focus(function(){
    elems = document.getElementsByName(datetimepicker_input_name)
    for (i = 0; i < elems.length; i++){
//        console.log(elems[i].value);
        full_date = elems[i].value;
        if (elems[i].value != ""){
            currPage = parseInt(full_date.slice(5, 7));
//            if(parseInt(mos.indexOf($("#" + datetimepicker_input_name + "_month").text())) == -1){
//                currPage = nowDay.getMonth() + 1;
//            }
//            else{
//                currPage = mos.indexOf($("#" + datetimepicker_input_name + "_month").text()) + 1
//            }
        }
        else{
            currPage = nowDay.getMonth() + 1;
        }
    }
    console.log(currPage);
    getDays(currPage - 1);
    $("#" + datetimepicker_input_name).css("display"," flex");
    $("#" + datetimepicker_input_name + "_overlay").css("display"," block");
    getTime(from_or_to);
    document.getElementById(datetimepicker_input_name + "_date-table").addEventListener("wheel", date_mousewheel);
//    });
}
//$(document).ready(function(){

function next_month(){
    console.log(currPage);
    if(currPage < 12){
        currPage =  currPage + 1;
        getDays(currPage - 1);
    }
    else{
        currPage = 1;
        next_year();
//        $("#" + datetimepicker_input_name + "_year").text(  parseInt($("#" + datetimepicker_input_name + "_year").text())  + 1   )  ;
//        getDays(currPage - 1);
    }
}

function prev_month(){
    if(currPage > 1){
        currPage =  currPage - 1;
        getDays(currPage - 1);
    }
    else{
        currPage = 12;
        prev_year();
//        $("#" + datetimepicker_input_name + "_year").text(  parseInt($("#" + datetimepicker_input_name + "_year").text())  - 1   )  ;
//        getDays(currPage - 1);
    }
}

function next_year(){
    $("#" + datetimepicker_input_name + "_year").text(  parseInt($("#" + datetimepicker_input_name + "_year").text()) + 1   )  ;
    getDays(currPage - 1);
}

function prev_year(){
    $("#" + datetimepicker_input_name + "_year").text(  parseInt($("#" + datetimepicker_input_name + "_year").text())  - 1   )  ;
    getDays(currPage - 1);
}

function next_hour(){
    $("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop($("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop() - 1);
}

function prev_hour(){
    $("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop($("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop() + 1);
}

function next_minute(){
    $("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop($("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop() - 1);
}

function prev_minute(){
    $("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop($("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop() + 1);
}

function next_second(){
    $("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop($("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop() - 1);
}

function prev_second(){
    $("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop($("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop() + 1);
}

function on_hour_scroll(event){
//console.log("on_hour_scroll");
    if (ignoreScrollEvents == false){
        var st = $("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop();
//        console.log(st);
//        console.log(hourScrollTop);
//        if (st >= hourScrollTop){
        if (st > hourScrollTop && hourDownScrollTimeout == false){
        // downscroll code
//                console.log("downscroll code");
//            console.log(st % 18);
//            rem = st % 18;
            hourScrollTop = hourScrollTop + scroll_elements_height;
//                console.log(hourScrollTop);
            $("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop(hourScrollTop);
            hourDownScrollTimeout = true;
            hourScrollTimer = setTimeout(function(){
                hourDownScrollTimeout = false;
            }, 100);
        }
        else if(st < hourScrollTop && hourUpScrollTimeout == false){
//        // upscroll code
//                console.log("upscroll code");
//            console.log(st % 18);
//            rem = st % 18;
            hourScrollTop = hourScrollTop - scroll_elements_height;
//                console.log(hourScrollTop);
            $("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop(hourScrollTop);
            hourUpScrollTimeout = true;
            hourScrollTimer = setTimeout(function(){
                hourUpScrollTimeout = false;
            }, 100);
        }
    }
}

function on_minute_scroll(){
    if (ignoreScrollEvents == false){
        var st = $("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop();
//            console.log(st);
//            console.log(minuteScrollTop);
//        if (st >= minuteScrollTop){
        if (st > minuteScrollTop && minuteDownScrollTimeout == false){
        // downscroll code
//                console.log("downscroll code");
//            console.log(st % 18);
//            rem = st % 18;
            minuteScrollTop = minuteScrollTop + scroll_elements_height;
//                console.log(minuteScrollTop);
            $("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop(minuteScrollTop);
            minuteDownScrollTimeout = true;
            minuteScrollTimer = setTimeout(function(){
                minuteDownScrollTimeout = false;
            }, 100);
        }
        else if(st < minuteScrollTop && minuteUpScrollTimeout == false){
//        // upscroll code
//                console.log("upscroll code");
//            console.log(st % 18);
//            rem = st % 18;
            minuteScrollTop = minuteScrollTop - scroll_elements_height;
//                console.log(minuteScrollTop);
            $("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop(minuteScrollTop);
            minuteUpScrollTimeout = true;
            minuteScrollTimer = setTimeout(function(){
                minuteUpScrollTimeout = false;
            }, 100);
        }
    }
}

function on_second_scroll(){
    if (ignoreScrollEvents == false){
        var st = $("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop();
//            console.log(st);
//            console.log(secondScrollTop);
//            console.log($('#second_scrolled_div').height());
//        if (st >= secondScrollTop){
        if (st > secondScrollTop && secondDownScrollTimeout == false){
        // downscroll code
//                console.log("downscroll code");
//                console.log(st % 18);
//            rem = st % 18;
            secondScrollTop = secondScrollTop + scroll_elements_height;
//                console.log(secondScrollTop);
            $("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop(secondScrollTop);
            secondDownScrollTimeout = true;
            secondScrollTimer = setTimeout(function(){
                secondDownScrollTimeout = false;
            }, 100);
        }
        else if(st < secondScrollTop && secondUpScrollTimeout == false){
//        // upscroll code
//                console.log("upscroll code");
//                console.log(st % 18);
//            rem = st % 18;
            secondScrollTop = secondScrollTop - scroll_elements_height;
//                console.log(secondScrollTop);
            $("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop(secondScrollTop);
            secondUpScrollTimeout = true;
            secondScrollTimer = setTimeout(function(){
                secondUpScrollTimeout = false;
            }, 100);
        }
    }
}

function getDays(month){
//    console.log(currPage);
    nowDay = new Date();
    $("#" + datetimepicker_input_name + "_date-table").empty();
//    console.log(month);
    if (year === undefined || isNaN(parseInt($("#" + datetimepicker_input_name + "_year").text()))){
        if (full_date != ""){
            year = full_date.slice(0, 4);
        }
        else{
            year = parseInt(nowDay.getFullYear());
        }
    }
    else{
        year = parseInt($("#" + datetimepicker_input_name + "_year").text());
    }
    $("#" + datetimepicker_input_name + "_year").text(year)
    $("#" + datetimepicker_input_name + "_month").text(mos[month]);

    $("#" + datetimepicker_input_name + "_date-table").append('<tr id="' + datetimepicker_input_name + '_date-table_head">');
    for(i = 0; i < 7; i++){
        $("#" + datetimepicker_input_name + "_date-table_head").append("<td id='" + datetimepicker_input_name + "_dt-head" + [i] + "'>"  + days[i] + "</td>");
    }

    $("#" + datetimepicker_input_name + "_date-table").append('</tr>');

    var firstDay = new Date(year,month, 1);
    var lastDay = new Date(year, month+1, 0);
    var offset = firstDay.getDay();
    if (offset == 0){
        offset = 6;
    }
    else{
        offset = offset- 1;
    }

    var dayCount = 1;
    for (i = 0; i < 6; i++){
        $("#" + datetimepicker_input_name + "_date-table").append('<tr id="' + datetimepicker_input_name + '_row-'+ i +'">');
        for(rw = 0; rw < 7; rw++ ){
            if(offset == 0){
                day_cnt = check_length_and_append_0(dayCount.toString());
//                console.log(full_date.slice(0, 4));
//                console.log(firstDay.getFullYear());
//                console.log(full_date.slice(5, 7));
//                console.log(firstDay.getMonth());
//                console.log(full_date.slice(8, 10));
//                console.log(day_cnt);
                if (full_date.slice(0, 4) == firstDay.getFullYear() && full_date.slice(5, 7) == firstDay.getMonth() + 1 && full_date.slice(8, 10) == day_cnt){
                    bg = "#8f8f8f";
                }
                else{
                    bg = "white";
                }
                if (firstDay.getFullYear() == nowDay.getFullYear() && firstDay.getMonth() == nowDay.getMonth() && day_cnt == nowDay.getDate()){
                    border = "1px solid red";
                }
                else{
                    border = "1px solid rgb(219, 219, 219)";
                }
                if(dayCount > lastDay.getDate()){
                    break;
                }
                $('#' + datetimepicker_input_name + "_row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>" + "<input class='datetimepicker_button' style='background-color:" + bg + "; border: " + border + "' type='button' name='datetimepicker_date_buttons' id ='day_val" +dayCount + "'" + " onclick='getVal(this)' value='" + dayCount + "'>" + '</td>' );
                dayCount++;
            }
            else{
                $('#' + datetimepicker_input_name + "_row-"+ i).append('<td>' +'</td>' );
                offset--;
            }
        }
        $("#" + datetimepicker_input_name + "_date-table").append('</tr>');
    }
}

function getTime(from_or_to=null){
    nowDay = new Date();
    ignoreScrollEvents = true;

    // Óra beállítások
    if (from_or_to==null){
        hour = parseInt(nowDay.getHours())
    }
    if (from_or_to=='from_date'){
        hour = 0;
    }
    if (from_or_to=='to_date'){
        hour = 23;
    }
    h = $('#' + datetimepicker_input_name + '_hour_scrolled_div').height();
    hourScrollTop = h - ((hour + 1) * scroll_elements_height) - 2;
    $("#" + datetimepicker_input_name + "_hour_scroll_area").scrollTop(hourScrollTop);

    // Perc beállítások
    if (from_or_to==null){
        minute = parseInt(nowDay.getMinutes())
    }
    if (from_or_to=='from_date'){
        minute = 0;
    }
    if (from_or_to=='to_date'){
        minute = 59;
    }
    h = $('#' + datetimepicker_input_name + '_minute_scrolled_div').height();
    minuteScrollTop = h - ((minute + 1) * scroll_elements_height) - 2;
    $("#" + datetimepicker_input_name + "_minute_scroll_area").scrollTop(minuteScrollTop);

    // Másodperc beállítások
    if (from_or_to==null){
        second = parseInt(nowDay.getSeconds())
    }
    if (from_or_to=='from_date'){
        second = 0;
    }
    if (from_or_to=='to_date'){
        second = 59;
    }
    h = $('#' + datetimepicker_input_name + '_second_scrolled_div').height();
    secondScrollTop = h - ((second + 1) * scroll_elements_height) - 2;
    $("#" + datetimepicker_input_name + "_second_scroll_area").scrollTop(secondScrollTop);

    ignoreScrollEventsTimeout = setTimeout(function(){
        ignoreScrollEvents = false;
    }, 500);
}
//});