import { PresetOptions } from './../../js/components/config/Selectors';
/* eslint-disable @typescript-eslint/no-use-before-define */
import 'bootstrap';
import 'bootstrap-select';
import 'fullcalendar';
import 'jstree';
import $ from 'jquery';
import moment, { Moment } from 'moment';
import types from '~/js/types.json';
import { PunktExt } from '~t/Dash/forms';
import Lang from 'lang.js';
import trans from '~/js/translations';
import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable';
import '../share/dialogPopup.tsx';
let csrf_token = document.head.querySelector('meta[name="csrf-token"]').content;
let newCalendar;
let typspec = 0;
let Start = '';
let Ende = '';
let FourDayStart = Date.now();
let newStart;
let newEnde;
let additionalBereiche = '';
let notInGroups = '';

//###############################################################################################################
//FUNCTIONS
//###############################################################################################################

const lang = new Lang({ messages: trans });
var loclang = document.getElementsByTagName('html')[0].getAttribute('lang');
lang.setLocale(loclang);
console.log(loclang)
console.log(trans)
//lang.setLocale(window.user_language || 'de');

function saveNode(node) {
  window.taskoTreeNode = node;
}

function node() {
  return window.taskoTreeNode;
}

function departmentID() {
  const treenode = node();
  if (treenode === undefined) {
    return null;
  }

  if (treenode.type === 'BER') {
    return treenode.id.substring(3);
  }

  for (let id of treenode.parents) {
    const idType = id.substring(0, 3).toLowerCase();
    if (idType !== 'ber') {
      continue;
    }

    return id.substring(3);
  }
}

function DeleteAll(eventID) {
  $.post(
    '/calendar/deleteEvents/' + eventID,
    {
      _token: csrf_token,
    },
    function (data) {
      alert(data);
      setTimeout(location.reload.bind(location), 500);
    },
  );
}

function setModalStartTime(startTime: Moment) {
  $('#modalStart-date').val(startTime.format('YYYY-MM-DD'));
  $('#modalStart-time').val(startTime.format('HH:mm'));
}

function modalStartTime(): string {
  const dateStr = $('#modalStart-date').val();
  const timeStr = $('#modalStart-time').val();

  return `${dateStr} ${timeStr}`;
}

function setModalEndTime(endtime: Moment) {
  $('#modalEnd-date').val(endtime.format('YYYY-MM-DD'));
  $('#modalEnd-time').val(endtime.format('HH:mm'));
}

function modalEndTime(): string {
  const dateStr = $('#modalEnd-date').val();
  const timeStr = $('#modalEnd-time').val();

  const isInvalid = dateStr === undefined || timeStr === undefined;
  if (isInvalid) return null;

  return `${dateStr} ${timeStr}`;
}

function intiCal(bereich) {
  document.getElementById('calendar').innerHTML = '';
  document.getElementById('calendar').innerHTML =
    "<div id='loading' class='offset-sm-4'><img src ='./images/loading-icon.png'>loading...Bitte warten.</div>";
  Start = $('#dateTimePickerStartVisible').val();
  if (Start == '' || localStorage.getItem('View') != 'timeGridYear') {
    Start =
      new Date().getFullYear() +
      '-' +
      digit2(new Date().getMonth() + 1) +
      '-01';
  }

  var today = new Date();
  let int_d = new Date(today.getFullYear(), today.getMonth() + 6, 1)
    .toISOString()
    .slice(0, 10);

  Ende = $('#dateTimePickerEndVisible').val();

  if (Ende == '' || localStorage.getItem('View') != 'timeGridYear')
    Ende = int_d;

  localStorage.setItem('Start', int_d);
  localStorage.setItem('Ende', int_d);

  // custom view shows only time ranges from the same weekday to the same weekday.
  newStart = prevmon(Start);
  newEnde = nextsun(Ende);
  if (localStorage.getItem('View') == 'timeGridFourDay') {
    Start = FourDayStart;
  }
  //describes the data from the checkboxes for monthly, daily and other tasks
  var andere = 0;
  var w = andere;
  var daily = 0;
  var d = daily;
  var monthly = 0;
  var m = monthly;
  if (
    localStorage.getItem('mtl') == 'notchecked' ||
    localStorage.getItem('mtl') === null
  ) {
    m = 4;
  }
  if (
    localStorage.getItem('andere') == 'notchecked' ||
    localStorage.getItem('andere') === null
  ) {
    w = 2;
  }
  if (
    localStorage.getItem('tgl') == 'notchecked' ||
    localStorage.getItem('tgl') === null
  ) {
    d = 1;
  }
  typspec = m + w + d;
  ////////////////////////////////////////////////

  $('#groupSelect').selectpicker('refresh');

  //////////////////////////////////////////////////
  var datasource = '';
  if (localStorage.getItem('View'))
    var defaultView = localStorage.getItem('View');
  else var defaultView = 'dayGridMonth';

  function getCheckedBoxes(num) {
    var checkedBoxes = [];
    var days = [1, 2, 3, 4, 5, 6, 0];
    for (var i = 0; i <= 6; i++) {
      if ((num & (1 << i)) !== 0) {
        checkedBoxes.push(days[i]);
      }
    }

    return checkedBoxes;
  }
  const calculateDatesCalender = (objOfDates: object) => {
    let datesData = [];
    // debugger;
    //end date should be 5 years fron now
    let date = new Date();
    date = moment(date).format('YYYY-MM-DD');
    // console.table(objOfDates);
    let endDate = moment(date).add(5, 'years').toDate();
    let dailyEndDate = moment(date).add(1, 'month').toDate();
    for (let i = 0; i < objOfDates['daily'].length; i++) {
      let d = null;
      d = objOfDates['daily'][i]['start'];
      let daysInterval = getCheckedBoxes(
        objOfDates['daily'][i]['agb_intervallMaske'],
      );
      if (objOfDates['daily'][i]['id'].includes('DYA')) {
        let objDaily = {
          title: objOfDates['daily'][i]['title'],
          start: objOfDates['daily'][i]['start'],
          id: objOfDates['daily'][i]['id'],
          allDay: true,
          color: objOfDates['daily'][i]['color'],
        };
        datesData.push(objDaily);
      } else {
        let dateCalc = moment(date);
        if (moment(objOfDates['daily'][i]['start']).isAfter(dateCalc)) {
          dateCalc = moment(objOfDates['daily'][i]['start']);
        }

        // let bool = dateCalc.isBefore(d);
        // while (bool) {
        //   dateCalc = moment(dateCalc)
        //     .add(objOfDates['daily'][i]['agb_rpt'], 'weeks')
        //     .toDate();
        //   bool = moment(dateCalc).isBefore(d);
        // }
        // ////console.log(moment(dateCalc).isBefore(dailyEndDate));
        if (objOfDates['daily'][i]['agb_rpt'] === 0) {
          objOfDates['daily'][i]['agb_rpt'] = 1;
        }
        for (
          let dTn = dateCalc;
          moment(dTn).isBefore(dailyEndDate);
          dTn = moment(dTn)
            .add(objOfDates['daily'][i]['agb_rpt'], 'weeks')
            .toDate()
        ) {
          let thisWeek = moment(dTn);
          for (
            thisWeek;
            thisWeek.isBefore(moment(dTn).add(1, 'weeks'));
            thisWeek.add(1, 'days')
          ) {
            if (
              daysInterval.includes(thisWeek.day()) ||
              thisWeek.isSame(objOfDates['daily'][i]['start'])
            ) {
              let objDaily = {
                title: objOfDates['daily'][i]['title'],
                start: moment(thisWeek).format().split('+')[0],
                id: objOfDates['daily'][i]['id'],
                allDay: true,
                color: objOfDates['daily'][i]['color'],
              };
              datesData.push(objDaily);
            }
          }
        }
      }
    }
    // repeat the code between the line 174 and 194 for monthly and yearly and N days

    for (let i = 0; i < objOfDates['month'].length; i++) {
      let d = null;
      d = objOfDates['month'][i]['start'];
      if (
        objOfDates['month'][i]['id'].includes('DYA') ||
        objOfDates['month'][i]['agb_rpt'] == 0 ||
        moment(objOfDates['month'][i]['start']).isBefore(date)
      ) {
        let objMonthly = {
          title: objOfDates['month'][i]['title'],
          start: objOfDates['month'][i]['start'],
          id: objOfDates['month'][i]['id'],
          allDay: true,
          color: objOfDates['month'][i]['color'],
        };
        datesData.push(objMonthly);
      } else {
        let dateCalc = moment(d);
        let bool = dateCalc.isBefore(date);
        while (bool) {
          dateCalc = moment(dateCalc).add(1, 'months').toDate();
          bool = moment(dateCalc).isBefore(date);
        }
        for (
          let dTn = dateCalc;
          moment(dTn).isBefore(endDate);
          dTn = moment(dTn).add(1, 'months').toDate()
        ) {
          let objMonthly = {
            title: objOfDates['month'][i]['title'],
            start: moment(dTn).format().split('+')[0],
            id: objOfDates['month'][i]['id'],
            allDay: true,
            color: objOfDates['month'][i]['color'],
          };
          datesData.push(objMonthly);
        }
      }
    }
    for (let i = 0; i < objOfDates['year'].length; i++) {
      let d = null;
      d = objOfDates['year'][i]['start'];
      if (
        objOfDates['year'][i]['id'].includes('DYA') ||
        objOfDates['year'][i]['agb_rpt'] == 0 ||
        moment(objOfDates['year'][i]['start']).isBefore(date)
      ) {
        let objyear = {
          title: objOfDates['year'][i]['title'],
          start: objOfDates['year'][i]['start'],
          id: objOfDates['year'][i]['id'],
          allDay: true,
          color: objOfDates['year'][i]['color'],
        };
        datesData.push(objyear);
      } else {
        let dateCalc = moment(d);
        let bool = dateCalc.isBefore(date);
        while (bool) {
          dateCalc = moment(dateCalc).add(1, 'years').toDate();
          bool = moment(dateCalc).isBefore(date);
        }
        for (
          let dTn = dateCalc;
          moment(dTn).isBefore(endDate);
          dTn = moment(dTn).add(1, 'years').toDate()
        ) {
          let objyear = {
            title: objOfDates['year'][i]['title'],
            start: moment(dTn).format().split('+')[0],
            id: objOfDates['year'][i]['id'],
            allDay: true,
            color: objOfDates['year'][i]['color'],
          };
          datesData.push(objyear);
        }
      }
    }
    //create same behavior but for N days
    for (let i = 0; i < objOfDates['N_days'].length; i++) {
      let d = null;
      d = objOfDates['N_days'][i]['start'];
      if (
        objOfDates['N_days'][i]['agb_rpt'] == 0 ||
        objOfDates['N_days'][i]['id'].includes('DYA') ||
        moment(objOfDates['N_days'][i]['start']).isBefore(date)
      ) {
        let objN_days = {
          title: objOfDates['N_days'][i]['title'],
          start: objOfDates['N_days'][i]['start'],
          id: objOfDates['N_days'][i]['id'],
          allDay: true,
          color: objOfDates['N_days'][i]['color'],
        };
        datesData.push(objN_days);
      } else {
        let dateCalc = moment(d);
        let bool = dateCalc.isBefore(date);
        while (bool) {
          dateCalc = moment(dateCalc)
            .add(objOfDates['N_days'][i]['agb_rpt'], 'days')
            .toDate();

          bool = moment(dateCalc).isBefore(date);
        }
        for (
          let dTn = dateCalc;
          moment(dTn).isBefore(endDate);
          dTn = moment(dTn)
            .add(objOfDates['N_days'][i]['agb_rpt'], 'days')
            .toDate()
        ) {
          let objN_days = {
            title: objOfDates['N_days'][i]['title'],
            start: moment(dTn).format().split('+')[0],
            id: objOfDates['N_days'][i]['id'],
            allDay: true,
            color: objOfDates['N_days'][i]['color'],
          };
          datesData.push(objN_days);
        }
      }
    }
    //add  ...extra to datesData
    for (let i = 0; i < objOfDates['extra'].length; i++) {
      let objExtra = {
        title: objOfDates['extra'][i]['title'],
        start: moment(objOfDates['extra'][i]['start']).format().split('+')[0],
        id: objOfDates['extra'][i]['id'],
        allDay: true,
        color: objOfDates['extra'][i]['color'],
      };
      datesData.push(objExtra);
    }
    // datesData = [];
    return datesData;
  };

  $.get('/calendar/getevents/getAll/' + bereich + '/' + typspec, {
    start: format(newStart),
    end: format(newEnde),
  }).done(function (data) {
    var datasource = JSON.parse(data);
    datasource = calculateDatesCalender(datasource);

    moment.createFromInputFallback = function (config) {
      config._d = new Date(config._i);
    };
    $('#calendar').fullCalendar('destroy');

    $('#calendar').fullCalendar({
      locale: loclang,
      plugins: ['dayGrid', 'interaction', 'timeGrid'],
      dayClick: CreateEvent,
      slotLabelFormat: 'HH:mm',
      header: {
        left: 'prev,today,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay',
      },
      buttonText: {
        today: lang.get('calendar.today'),     
        month: lang.get('calendar.month'), 
        agendaWeek: lang.get('calendar.agendaWeek'),
        agendaDay: lang.get('calendar.agendaDay')
      },
      editable: true,
      eventData: function (eventEl) {
        return $(eventEl).data('event');
      },
      eventRender: function (event, element) {
        element.attr('title', event.tip);
      },
      // id: event.id,
      selectable: true,
      selectHelper: true,
      droppable: true, // this allows things to be dropped onto the calendar
      drop: DayClick,
      eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
        if (event.id.startsWith('DYA')) {
          //here code for DYA
          var token = csrf_token;
          var dya_ergid = event.id.substr(3);
          var dya_nextaufgabe = event.start.format('YYYY-MM-DD HH:mm:ss');

          $.post('/update-dya/' + dya_ergid + '/' + dya_nextaufgabe, {
            _token: token,
            dya_ergid,
            dya_nextaufgabe,
          });
        } else if (event.id.startsWith('CAL')) {
          //here code for DYA

          var events_id = event.id.substr(3);
          var start_time = event.start.format('YYYY-MM-DD HH:mm:ss');
          var end_time = event.end.format('YYYY-MM-DD HH:mm:ss');

          $.post(
            '/update-cal/' + events_id + '/' + start_time + '/' + end_time,
            {
              _token: csrf_token,
              events_id,
              start_time,
              end_time,
            },
          );
        } else if (event.id.startsWith('AGB')) {
          //here code for AGB
          var token = csrf_token;
          if (token == null) return;
          var agb_id = event.id.substr(3);

          var agb_nextaufgabe = event.start.format('YYYY-MM-DD HH:mm:ss');

          $.post('/update-agb/' + agb_id + '/' + agb_nextaufgabe, {
            _token: token,
            agb_id,
            agb_nextaufgabe,
          });
        } else if (event.id.startsWith('KDB')) {
          //here code for KDB
          var id = event.id.substr(3);

          var datum = event.start.format('YYYY-MM-DD');

          $.post('/update-kdb/' + id + '/' + datum, {
            _token: token,
            id,
            datum,
          });
        }
      },
      eventReceive: function (event) {},
      timeFormat: 'H:mm',
      eventClick: function (event, jsEvent, view) {
        // var id = event.id;
        var token = csrf_token;
        var id = event.id.substr(3);
        var events_id = parseInt(id);
        if (event.id.startsWith('CAL')) {
          // ###################### get element data #########################
          $.get('/get-cal-event/' + events_id, function (data) {
            var events_id = data[0].events_id;
            var events_start = data[0].events_start;
            var events_end = data[0].events_end;
            var events_json = JSON.parse(data[0].events_json).Max;
            var events_jsonCount = JSON.parse(data[0].events_json).Count;
            var events_header = data[0].events_header;
            var event_type = data[0].event_type;
            var isClone = data[0].clone;

            $('#save').unbind('click');
            $('#save').click(function (id) {
              var events_header = $('#input-title').val();
              var events_start = modalStartTime();
              var events_end = modalEndTime();
              var events_json = $('#maxInput').val();

              if (events_json != '') {
                event_type = 1;
              } else {
                event_type = 0;
              }

              var id = event.id.substr(3);
              var events_id = parseInt(id);

              $.post(
                '/update-reservation-or-event/' + events_id,
                {
                  events_id,
                  events_header,
                  events_start,
                  events_end,
                  events_json,
                  event_type,
                  _token: token,
                },
                function () {
                  location.reload();
                },
              );
            });

            if (event_type == 1) {
              $('#modal').modal('show');
              $('#calendarModal').modal();

              $('#reservation').prop('checked', true);
              $('#max').css('display', 'block');
              $('#maxInput').val(events_json);
              $('#input-title').val(event.title);
              $('#modalTitle').html(event.title);

              // firefox does not support input type datetime-local
              setModalStartTime(moment(events_start));
              setModalEndTime(moment(events_end));

              if (events_jsonCount) {
                $('#usedReserv').text(
                  ' (reserviert: ' + events_jsonCount + ') ',
                );
              }
              $('.isClone').remove();
              $('.saveAll').unbind('click');
              $('.deleteAll').unbind('click');
              if (isClone) {
                $('.modal-footer').append(() => {
                  return $(
                    "<button type='button' id='deleteAll' class='isClone btn btn-warning deleteAll' > Serie löschen </button>",
                  ).click(() => DeleteAll(events_id));
                });
              }
            } else if (event_type == 0) {
              $('#modal').modal('show');
              $('#calendarModal').modal();

              $('#reservation').prop('checked', false);
              $('#max').css('display', 'none');
              $('#maxInput').val('');
              $('#input-title').val(event.title);
              $('#modalTitle').html(event.title);

              setModalStartTime(moment(event.start));
              setModalEndTime(moment(event.end));
            }
          });

          //Delete calendar event and reservation
          $('#del_event').unbind('click');
          $('#del_event').click(function (id) {
            var id = event.id.substr(3);
            var events_id = parseInt(id);

            $.post(
              '/delete-cal/' + events_id,
              {
                events_id,
                _token: token,
              },
              function (data) {
                location.reload();
              },
            );
          });

          //################## $.get()

          // $('#maxInput').val(event)
        } else if (
          event.id.startsWith('DYA') ||
          event.id.startsWith('KDB') ||
          event.id.startsWith('AGB')
        ) {
          EventClick(event);
        }
      },
      firstDay: 1,

      eventSources: [
        {
          events: datasource,
          // id: 'first'
        },
        {
          url: 'https://ipty.de/feiertag/api.php?do=getFeiertage&loc=BW,BY,BE,BB,HB,HH,HE,MV,NI,NW,RP,SL,SN,ST,SH,TH&outformat=Y-m-d',
          color: '#22887B',
          textColor: 'white',
        },
      ],
    });

    document.getElementById('loading').style.display = 'none';

    $('#calendar').fullCalendar('render');

    $('#calendar').fullCalendar('refetchEvents');

    document.onload = ButtonListener();
    return datasource;
  });

  var aktBer = '#ber' + bereich;
  $(aktBer).addClass('active');
  if (localStorage.getItem('mtl') == 'checked') {
    document.getElementById('mtl').checked = true;
  } else {
    document.getElementById('mtl').checked = false;
  }
  if (localStorage.getItem('andere') == 'checked') {
    document.getElementById('andere').checked = 'checked';
  } else {
    document.getElementById('andere').checked = false;
  }
  if (localStorage.getItem('tgl') == 'checked') {
    document.getElementById('tgl').checked = 'checked';
  } else {
    document.getElementById('tgl').checked = false;
  }
}

function ButtonListener() {
  document.addEventListener('DOMContentLoaded', function (e) {
    var x = document.getElementsByClassName('fc-button-primary');
    for (var i = 0; i < 5; i++) {
      x[i].addEventListener('click', function () {
        // ////console.log(x);
        keepActiveDateWhenDayView(this.classList[0]);
        var date = newCalendar.getDate();
        if (
          this.classList[0] == 'fc-today-button' ||
          date < newStart ||
          (localStorage.getItem('View') == 'timeGridFourDay' &&
            date > newEnde - 1000 * 60 * 60 * 24 * 3) ||
          (localStorage.getItem('View') == 'dayGridWeek' &&
            date > newEnde - 1000 * 60 * 60 * 24 * 8) ||
          localStorage.getItem('View') == 'dayGridMonth'
        )
          var Data = $.get(
            '/calendar/getevents/getAll/' +
              localStorage.getItem('aktBer') +
              '/' +
              typspec,
            {
              start: formatDateForNextButton(new Date(date), 0),
              end: formatDateForNextButton(new Date(date), 1),
              Bereiche: additionalBereiche,
              Groups: notInGroups,
            },
          ).done(function (data) {
            var datasource = JSON.parse(data);
            var events = newCalendar.getEventSources();
            if (events) events[0].remove();
            newCalendar.addEventSource(datasource['daily']);
            newCalendar.render();
            if (localStorage.getItem('View') == 'timeGridFourDay')
              newCalendar.changeView('timeGridFourDay');
            newStart = new Date(date);
            if (localStorage.getItem('View') == 'dayGridWeek') {
              newEnde = new Date(date).setMonth(date.getMonth() + 1);
              if (new Date(newEnde).getMonth() > 12) {
                newEnde = new Date(newEnde).setMonth(
                  new Date(newEnde).getMonth() - 12,
                );
                newEnde = new Date(newEnde).setFullYear(
                  new Date(newEnde).getFullYear() + 1,
                );
              }
            }
            ButtonListener();
          });
      });
    }
    for (var i = 3; i <= 6; i++) {
      if (x[i].classList[0] == 'fc-dayGridMonth-button') {
        x[i].addEventListener('click', function () {
          localStorage.setItem('View', 'dayGridMonth');
        });
      }
      if (x[i].classList[0] == 'fc-dayGridWeek-button') {
        x[i].addEventListener('click', function () {
          localStorage.setItem('View', 'dayGridWeek');
        });
      }
      if (x[i].classList[0] == 'fc-timeGridYear-button') {
        x[i].addEventListener('click', function () {
          localStorage.setItem('View', 'timeGridYear');
          intiCal(localStorage.getItem('aktBer'));
        });
      }
      if (x[i].classList[0] == 'fc-timeGridFourDay-button') {
        x[i].addEventListener('click', function () {
          localStorage.setItem('View', 'timeGridFourDay');
        });
      }
    }
  });
}

function keepActiveDateWhenDayView(button) {
  if (
    localStorage.getItem('View') == 'timeGridFourDay' &&
    (button == 'fc-prev-button' || button == 'fc-next-button')
  ) {
    // ////console.log('FourDayStart');
    FourDayStart = format(newCalendar.view.activeStart);
    localStorage.setItem('FourDayStart', format(newCalendar.view.activeStart));
  }
}

function checkboxes(chkid) {
  var getElement = '#' + chkid;
  if (document.getElementById(chkid).checked) {
    localStorage.setItem(chkid, 'checked');
  } else {
    localStorage.setItem(chkid, 'notchecked');
  }
}

var DatumZumAufgabenErstellen;

function Eventdata(id) {
  return id;
}

function setaktBer(id) {
  localStorage.setItem('aktBer', id);
  localStorage.setItem('groupsToOpen', '{"BERBER":' + id + '}');
  $('a').removeClass('active');
  window.bid = id;
  intiCal(id);
}

function getdate(bis) {
  var bis = document.getElementById('modalBis');
  bis = bis.value;
  window.bis = bis;
  var selectedDate = window.bis;

  selectedDate = new Date(selectedDate);
  selectedDate.setDate(selectedDate.getDate() + 1);

  const diffTime = Math.abs(currentDate - selectedDate);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

  var getDaysArray = function (currentDate, selectedDate) {
    for (
      var arr = [], dt = new Date(currentDate);
      dt <= selectedDate;
      dt.setDate(dt.getDate() + 1)
    ) {
      arr.push(new Date(dt));
    }
    return arr;
  };

  var daylist = getDaysArray(currentDate, selectedDate);
  daylist.map((v) => v.toISOString().slice(0, 10)).join('');

  window.daylist = daylist;
}

function CreateEvent(info) {
  if (node() === undefined) {
    return;
  }
  // localStorage.clear();
  var date = info._d;
  var newFormat =
    date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear();
  var currentDate = new Date(newFormat);

  window.currentDate = currentDate;

  var bisNext = window.bis;

  if (bisNext == 'undefined') {
    var getBisDate = getdate();
  }

  DatumZumAufgabenErstellen = date;
  $('#CalModal .modal-body').html('');
  // var department = localStorage.getItem('aktBer');
  let department = departmentID();

  oneRemarkButton(department);

  $('#CalModal .modal-title').html(
    '<h3> ' +
      lang.get('calendar.create') +
      '</h3> ' +
      lang.get('calendar.create task') +
      ' ' +
      format(date),
  );
  $('#CalModal').modal('show');
}

function DayClick(info) {
  var date = info._d;
  DatumZumAufgabenErstellen = date;
  oneEventButton(window.taskocalendar);
  $('#CalModal .modal-title').html(
    '<h3>Erstellen:</h3>Aufgabe erstellen für den ' + format(date),
  );
  $('#CalModal').modal('show');
}

function GroupSelect(ber_id) {
  if (localStorage.getItem('grp' + ber_id) != -1)
    localStorage.setItem('grp' + ber_id, -1);
  else localStorage.setItem('grp' + ber_id, 1);
}

function OwnContextMenu(addBer) {
  if (additionalBereiche == '') additionalBereiche = addBer;
  else additionalBereiche = additionalBereiche + ',' + addBer;
  intiCal(localStorage.getItem('aktBer'));
}

function addBereich(addber) {}

function EventClick(info) {
  var id = info.id;

  $.get('/calendar/getevent/' + id, function (data) {
    var res = $.parseJSON(data);
    var link =
      '<a href=/calendar/showstr/' +
      res['erg_id'] +
      " target='_blank'> #" +
      res['erg_id'] +
      '</a>';

    $('#CalModal .modal-title').text(res['agb_name']);
    $('#CalModal .modal-body').html(res['erg_bem']);
    $('#CalModal').modal('show');

    $('#one-event-dya').click((e) => {
      const id = e.target.dataset?.id;
      if (id === undefined) return;
      oneEventDya(id);
    });

    $('#oneEventButtonTest').click((e) => {
      const id = e.target.dataset?.id;
      if (id === undefined) return;
      oneEventButtonTest(id);
    });
  });
}

function format(date) {
  date = new Date(date);
  var Y = date.getFullYear();
  var M = date.getMonth() + 1;
  var d = date.getDate();
  var H = date.getHours();
  var i = date.getMinutes();
  var s = date.getSeconds();
  var nextAufgabe = Y + '-' + digit2(M) + '-' + digit2(d) + ' ';
  return nextAufgabe;
}

//function for formatting the date to a pattern, thats readable in frontend
function formatDateToRead(date) {
  date = new Date('2011-04-11T10:20:30Z');
  var Y = date.getFullYear();
  var M = date.getMonth() + 1;
  var d = date.getDate();
  var ReadDate = d + '.' + M + '.' + Y;
  // return ReadDate instanceof Date && !isNaN(d);
  return ReadDate;
}
function digit2(number) {
  if (number < 10) return '0' + number;
  return number;
}

function prevmon(date) {
  let newDate = new Date(date);
  var day = newDate.getDay();
  var prevMonday;
  if (newDate.getDay() == 1) {
    prevMonday = new Date(newDate).setDate(newDate.getDate());
  }
  if (newDate.getDay() == 0)
    prevMonday = new Date(newDate).setDate(newDate.getDate() - 6);
  else {
    prevMonday = new Date(newDate).setDate(newDate.getDate() - day + 1);
  }
  return prevMonday;
}

function nextsun(date) {
  let newDate = new Date(date);
  var day = newDate.getDay();
  var prevMonday;
  if (newDate.getDay() == 0) {
    prevMonday = new Date(newDate).setDate(newDate.getDate());
  }
  if (newDate.getDay() == 0)
    prevMonday = new Date(newDate).setDate(newDate.getDate());
  else {
    prevMonday = new Date(
      new Date(newDate).setDate(newDate.getDate() - day + 7),
    );
  }

  return prevMonday;
}

function formatDateForNextButton(date, add) {
  // ////console.log(date);
  var date = new Date(date);
  if (add == 1) date = new Date(date.setDate(date.getDate() + 14));
  if (add == 0) date = new Date(date.setDate(date.getDate() - 14));
  var d = date.getDate();
  var m = date.getMonth() + 1 + add;
  var y = date.getFullYear();
  if (m > 12) {
    m = m - 12;
    y = y + 1;
  }
  var res = y + '-' + digit2(m) + '-' + digit2(d);
  return res;
}

function reservation() {
  var checkBox = document.getElementById('reservation');
  var max = document.getElementById('max');
  var repeat_box = document.getElementById('repeat_box');
  if (checkBox.checked == true) {
    max.style.display = 'block';
    repeat_box.style.display = 'block';
  } else {
    max.style.display = 'none';
    repeat_box.style.display = 'none';
    bis.style.display = 'none';
  }
}

function oneRemarkButton(department) {
  var endzeit = new Date(DatumZumAufgabenErstellen);
  endzeit.setHours(endzeit.getHours() + 2);
  $('.deleteAll').remove();
  var today = new Date();
  var date =
    today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

  var FormInhalt =
    '<label for="reservation">' +
    lang.get('calendar.reservation') +
    '</label>\
    <input id="reservation" checked name="reservation" type="checkbox" style="left:15%; vertical-align:middle; height: 25px" >\
  \
    <br/><b> ' +
    lang.get('calendar.note') +
    '</b>\
  <textarea id="comment" rows="3"cols="98" width="100%" class="form-control"> </textarea> \
  <br><b> ' +
    lang.get('calendar.infos') +
    '</b>\
  <textarea id="infotext" rows="3"cols="98" width="50%" class="form-control"> </textarea> \
   <div style="display:flex;">\
    <div style="display: inline-block; width:33%">\
      <br/><b> ' +
    lang.get('calendar.departure time') +
    '</b>\
      <input style="width: 120px; border: 1px solid gray; left: 2%" id="starttime" data-toggle="tooltip" data-placement="top"\
        title="e.g. 13:00" class="form-control timepicker without_ampm" placeholder="00:00" type="text" value="' +
    '"/>\
    <br><b> ' +
    lang.get('calendar.end time') +
    ' </b> \
      <input style="width: 120px; border: 1px solid gray; left: 2%" id="endtime" data-toggle="tooltip" data-placement="top"\
        title="e.g. 14:00" class="form-control timepicker without_ampm" placeholder="00:00" type="text" value="' +
    '"/>\
    <div id="max" style="display:true">\
    <br><b> ' +
    lang.get('calendar.number of') +
    ' <br>' +
    lang.get('calendar.maximum visitors') +
    '</b><span claas="used"> </span> </br> \
    <input style="width: 120px; border: 1px solid gray; left: 2%" id="maxInput" \
     class="form-control timepicker without_ampm" type="text" value="' +
    '"/>\
    </div>\
     </div>\
    \
    <div style="display: inline-block; margin: 22px; width:33%">\
    <div id="repeat_box" style="display:true">\
      <label><b>' +
    lang.get('calendar.repeat') +
    '</b></label>\
      <select id="repeat" class="form-control" style="border: 1px solid gray;">\
        <option value="not">' +
    lang.get('calendar.no repeat') +
    '</option>\
        <option value="taglich">' +
    lang.get('calendar.daily') +
    '</option>\
        <option value="werktags">' +
    lang.get('calendar.weekdays') +
    '</option>\
        <option value="wochentlich">' +
    lang.get('calendar.weekly') +
    '</option>\
      </select>\
    </div>\
      <div id="bis" style="display:none">\
        <br><b><span style="margin:0">Bis:</span></b>\
        <br><input id="modalBis" style="border: 1px solid gray; left:36%" type="date" class="modal-start" value="' +
    date +
    '"></input>\
      </div>\
  \
    </div>\
  </>\
   ';
  $('#CalModal .modal-body').html(FormInhalt);
  document.getElementById('SubmitButton').style.display = 'block';
  $('#SubmitButton').unbind('click');
  $('#SubmitButton').bind('click', function () {
    newReminder(DatumZumAufgabenErstellen, department);
  });

  $('#reservation').click(function () {
    reservation();
  });

  $('#repeat').on('change', function (e) {
    let sel = e.target.value;
    let bis = document.getElementById('bis');

    if (sel == 'taglich') {
      bis.style.display = 'block';
    } else if (sel == 'wochentlich') {
      bis.style.display = 'block';
    } else if (sel == 'werktags') {
      bis.style.display = 'block';
    } else {
      bis.style.display = 'none';
    }
  });

  $('#modalBis').on('change', (e) => {
    let bis = e.target.value;
    window.bis = bis;
    let currentDate = Date.now();
    var selectedDate = bis;

    selectedDate = new Date(selectedDate);
    selectedDate.setDate(selectedDate.getDate() + 1);

    let getDaysArray = function (currentDate, selectedDate) {
      for (
        var arr = [], dt = new Date(currentDate);
        dt <= selectedDate;
        dt.setDate(dt.getDate() + 1)
      ) {
        arr.push(new Date(dt));
      }
      return arr;
    };

    let daylist = getDaysArray(currentDate, selectedDate);
    daylist.map((v) => v.toISOString().slice(0, 10)).join('');
    window.daylist = daylist;
  });
}
//################################

function oneEventButton(id) {
  $.get('/ProceedTask/doAction/newERG/' + id + '/new', function (data) {
    $('#CalModal .modal-body').html(data[0]);
  });

  window.taskocalendar = id;

  var date = DatumZumAufgabenErstellen;
  document.getElementById('SubmitButton').style.display = 'block';
  document
    .getElementById('SubmitButton')
    .addEventListener('click', function () {
      newTask(date);
    });
}

function newTask(date) {
  var formElements = new Array();
  var agb_id = 0;
  var bemerkung = '';
  var errorFlag = false;
  var radiosArr = [];

  $('#CalModal .modal-body :input').each(function (index) {
    if ($(this).hasClass('newBemerkung')) {
      agb_id = $(this).attr('data-agb');
      bemerkung = $(this).val();
    }
  });

  var ergid = 0;
  if ($('#CalModal .modal-body').find('.addDyn').length) {
    ergid = $('#CalModal .modal-body').find('.addDyn').val();
  }
  var form_Data = new FormData();

  form_Data.set('fields', JSON.stringify(formElements));
  form_Data.set('bemerkung', bemerkung);
  form_Data.set('_token', csrf_token);
  form_Data.set('ergid', ergid);
  form_Data.set('differentDate', format(date));

  $.ajax({
    type: 'post',
    contentType: false,
    processData: false,
    cashe: false,
    url: '/ProceedTask/doAction/newERG/' + agb_id,
    data: form_Data,
    success: function (data) {
      $.get(
        '/calendar/moveevent/' + agb_id + '/' + format(date),
        function (data) {
          document.getElementById('calendar').innerHTML = '';
          intiCal(localStorage.getItem('aktBer'));
        },
      );
      location.reload();
    },
    error: function (err) {},
  });
}

function newReminder(datum, department) {
  var days = window.daylist;

  // days = days.slice(1);
  datum = datum.toISOString().slice(0, 10);

  let bemerkung = $('#comment').val();
  let starttime = $('#starttime').val();
  let endtime = $('#endtime').val();
  let repeat = $('#repeat').val();
  let maxInput = $('#maxInput').val();
  let modalBis = $('#modalBis').val();
  let infotext =
    '{"Text":"' +
    $('#infotext').val() +
    '"' +
    ', ' +
    '  "Max":"' +
    $('#maxInput').val() +
    '"}';

  let reserved = 1;
  if ($('#maxInput').val() == '') {
    reserved = 0;
  }

  $.post(
    '/calendar/newevent/' + department,
    {
      bemerkung: bemerkung,
      starttime: starttime,
      endtime: endtime,
      infotext: infotext,
      reserved: reserved,
      repeat: repeat,
      maxInput: maxInput,
      endDate: modalBis,
      datum: datum,
      _token: csrf_token,
    },
    function (data) {
      setTimeout(location.reload.bind(location), 500);
    },
  );

  document
    .getElementById('SubmitButton')
    .removeEventListener('click', function () {});
}

function oneEventButtonTest(id) {
  const submitBtn = document.getElementById('SubmitButton');
  submitBtn.style.display = 'block';
  const formUrl = `form?byid=${id}`;
  window.openFormPopup(formUrl);
}


function oneEventDya(id) {

  const submitBtn = document.getElementById('SubmitButton');
  submitBtn.style.display = 'block';
  $.get('/ProceedTask/doAction/DyaERG/' + id, function (data) {
    if (typeof data[3] === 'undefined') return;
    const newId = data[3];
    const formUrl = `form?byid=${newId}`;
    window.openFormPopup(formUrl);
  });
}


function DragDrop(info) {
  newdt = info.event.start;
  newdt = format(newdt);
  if (localStorage.getItem('View') != 'timeGridFourDay')
    newdt = newdt.substring(0, 11);
  var id = info.event.id;
  $.get('/calendar/moveevent/' + id + '/' + newdt, function (data) {
    document.getElementById('calendar').innerHTML = '';
    intiCal(localStorage.getItem('aktBer'));
  });
}

function setAGB(par) {
  const agb = PunktExt(par);
  var btSave = document.getElementById('SubmitButton');
  $('.modal-body')[0].innerHTML = '';

  $('.modal-body')[0].appendChild(agb);
  $('#CalModal').modal({ backdrop: 'static', keyboard: false });
  $('#CalModal').modal('show');
  agb.pktChange = function () {
    var ok = agb.istrue();
    btSave.disabled = !ok;
  };
  agb.pktChange();
  btSave.onclick = function () {
    try {
      agb.save();
      $('#CalModal').modal('hide');
      location.reload();
    } catch (err) {
      alert(err);
    }
  };
}

function saveAll(eventID) {
  alert('save : ' + eventID);
}

// ------ START JS TREE ------

$('#jstree_demo')
  .jstree({
    core: {
      animation: 0,
      // "check_callback" : true,
      data: {
        url: function (node) {
          return node.id === '#'
            ? '/TreeRoot'
            : '/TreeNode/' + node.type + node.id;
        },
        dataType: 'json',
      },
      worker: false,
    },
    types: types,
    search: {
      case_sensitive: false,
      show_only_matches: true,
      show_only_matches_children: true,
      ajax: {
        url: '/search',
      },
    },
    plugins: ['state', 'types', 'wholerow', 'json_data', 'massload', 'search'],
  })
  .on('after_open.jstree', function (e, data) {
    var jsonNodes = $('#jstree_demo')
      .jstree(true)
      .get_json('#', { flat: true });
    $.each(jsonNodes, function (i, val) {
      var treeNode = document.getElementById($(val).attr('id'));
      const isGrouping =
        val.type === 'GRP' || val.type === 'GRPi' || val.type === 'BER';
      if (isGrouping) return true; // continue
      $(treeNode).hide();
    });
  })
  .on('select_node.jstree', function (e, data) {
    saveNode(data.node);

    if (data.node.type === 'BER') {
      return intiCal(data.node.id.substr(3));
    }

    const isTask = data.node.type !== 'BER' && data.node.type !== 'GRP';
    if (isTask) {
      return intiCal(data.node.parent.toLowerCase());
    }

    return intiCal(data.node.id.toLowerCase());
  })
  .on('dehover_node.jstree', function (e, data) {
    $('#tooltip').hide();
  })
  .on('search.jstree', function () {
    $('#jstree-stats-searchicon').show();
    $('#jstree-stats-searchingicon').hide();
  });

const jstreeElement = $('#jstree_demo');
if (!(jstreeElement.jstree(true) === null)) {
  window.clearFunction = () => {
    jstreeElement.jstree(true).clear_search();
    $('#jstree-stats-searchicon').show();
    $('#jstree-stats-searchingicon').hide();
  };
}

$('#jstree-stats-search').change(() => {
  const searchString = $('#jstree-stats-search').val().toString().toLowerCase();
  if (searchString.length === 0) {
    jstreeElement.jstree(true).clear_search();
  }
  let to = 0;
  if (to) {
    clearTimeout(to);
  }
  to = setTimeout(() => {
    if (searchString.length < 3) {
      return;
    }

    $('#jstree-stats-searchicon').hide();
    $('#jstree-stats-searchingicon').show();
    jstreeElement.jstree(true).search(searchString);
  }, 250);
});

$('#init-calendar').click(() => {
  intiCal(departmentID());
});

$('#calendar-filters').change((e) => {
  e.preventDefault();
  if (e.target.checked !== true) {
    localStorage.setItem(e.target.name, 'notchecked');
    return;
  }
  localStorage.setItem(e.target.name, 'checked');
});