jQuery(function ($) {
  $(window).on('load', function () {

    $( "#loginDialog" ).hide();
    const token = window.localStorage.getItem('token');
    const $onMySchedulePage = $("[id^=myschedule-placeholder]");

    if (token != null) {
      const $onSchedulePage = $("[id^=loginDialog]");
      if ($onSchedulePage.length > 0) {
        $.ajax({
          url: the_ajax_script.ajaxurl,
          method: 'POST',
          data: {
            action: 'favourites',
            favs: 'GET',
            token: token
          },
          success: function (response) {
            if (response !== '') {
              const value = JSON.parse(response);
              value.forEach(function (item, index) {
                window.localStorage.setItem('fav-' + item.proposalId, item.proposalId);
                $("[id=dev-cfp-talk-" + item.proposalId + "]").css("color", "red");
              });
            }
          }
        });
      } else if ($onMySchedulePage.length > 0) {
        $.ajax({
          url: the_ajax_script.ajaxurl,
          method: 'POST',
          data: {
            action: 'my_schedule',
            favs: 'GET',
            token: token
          },
          success: function (response) {
            let content;
            if (response !== '') {
              const value = JSON.parse(response);
              content = '<div class="dev-cfp-wrapper">'
              value.forEach(function (item, index) {
                const speakers = [];
                item.speakers.forEach(speaker => {
                  speakers.push('<a href="speaker-details?id=' + speaker.id + '">' + speaker.firstName + ' ' + speaker.lastName + '</a>');
                });
                content += '<div id="my-schedule-' + item.proposalId + '" class="dev-cfp-row">';
                content += '  <div class="dev-cfp-column" style="flex-grow: 0.1">';
                content += '    <img src="' + item.trackImageURL + '" style="margin-top: 20px;display: block;margin-left: auto;margin-right: auto;width: 50%;">';
                content += '    <p style="text-align: center">' + item.sessionTypeName + '</p>';
                content += '  </div>';
                content += '  <div class="dev-cfp-column" style="padding-left: 20px">';
                content += '   <p>On ' + moment(item.fromDate).format("dddd") + ' from ' + moment(item.fromDate).format("HH:mm") + ' until ' + moment(item.toDate).format("HH:mm") + ' in ' + item.roomName + '</p>';
                content += '   <p><a href="talk?id=' + item.proposalId + '">' + item.proposalTitle + '</a></p>';
                content += '   <p>By ' + speakers.join(', ') + '</p>';
                content += '  </div>';
                content += '  <div class="dev-cfp-column" style="flex-grow: 0.1">';
                content += '    <div id="delete-' + item.proposalId + '" class="dev-cfp-delete-btn">';
                content += '      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-trash-alt fa-w-14" width="14px"><path fill="currentColor" d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" class=""></path></svg>';
                content += '    </div>';
                content += '  </div>';
                content += '</div>';
                content += ' <hr>';
              });
              content += '</div>';
            } else {
              content = "<p style='color:black'>No favourites yet available, click the heart icon on the schedule to add some.</p>";
            }
            $onMySchedulePage.append(content);
          }
        });
      }
    } else {
      if ($onMySchedulePage) {
        $onMySchedulePage.append("<p style='color:black'>No favourites yet available, click the heart icon on the schedule to add some.</p>");
      }
    }

    $("#loginSubmit").on("click", function () {
      const username = $("#username").val();
      const password = $("#password").val();
      const data = {
        action: 'authenticate',
        username: username,
        password: password
      };
      $.post(the_ajax_script.ajaxurl, data, function (response) {
        const value = JSON.parse(response);
        window.localStorage.setItem('token', value.id_token);
        $( "#loginDialog" ).dialog('close');
        $.ajax({
          url: the_ajax_script.ajaxurl,
          method: 'POST',
          data: {
            action: 'favourites',
            favs: 'GET',
            token: value.id_token
          },
          success: function (response) {
            if (response !== '') {
              const value = JSON.parse(response);
              value.forEach(function (item, index) {
                window.localStorage.setItem('fav-' + item.proposalId, item.proposalId);
                $("[id=dev-cfp-talk-" + item.proposalId + "]").css("color", "red");
              });
            }
          }
        });
      }).fail(function(response) {
        $("#errorMsg").html("Invalid credentials!");
      });
      return false;
    });

    $('body').on('click', '[id^=dev-cfp-talk-]', function() {
      const currentToken = window.localStorage.getItem('token');
      if (currentToken === null) {
        $( "#loginDialog" ).dialog();
      } else {
        const htmlTalkId = this.id;
        const talkId = htmlTalkId.split("-")[3];
        const storageKey = 'fav-' + talkId;
        const talkSelector = $("[id=dev-cfp-talk-" + talkId + "]");
        const faved = window.localStorage.getItem(storageKey);
        if (faved != null) {
          $.ajax({
            url: the_ajax_script.ajaxurl,
            method: 'POST',
            data: {
              action: 'delete_fav',
              talkId: talkId,
              token: currentToken
            },
            success: function(data){
              window.localStorage.removeItem(storageKey);
              talkSelector.css("color", "");
            }
          });
          return false;
        } else {
          $.ajax({
            url: the_ajax_script.ajaxurl,
            method: 'POST',
            data: {
              action: 'favourites',
              talkId: talkId,
              token: currentToken
            },
            success: function(data){
              window.localStorage.setItem(storageKey, talkId);
              talkSelector.css("color", "red");
            }
          });
          return false;
        }
      }
    });

    $('body').on('click', '[id^=delete-]', function() {
      const currentToken = window.localStorage.getItem('token');
      const htmlTalkId = this.id;
      const talkId = htmlTalkId.split("-")[1];
      const storageKey = 'fav-' + talkId;
      const selector = $("[id=my-schedule-" + talkId + "]");
      $.ajax({
        url: the_ajax_script.ajaxurl,
        method: 'POST',
        data: {
          action: 'delete_fav',
          talkId: talkId,
          token: currentToken
        },
        success: function (data) {
          window.localStorage.removeItem(storageKey);
          selector.fadeOut('slow');
        }
      });
      return false;
    });

  });
});