{% extends "base.html" %}

{% block header %}
<header id="negotiation-header">
  <div class="inner">
    <nav id="navigation">
      <!--
      <span id="home-button" class="nav-button">
        <a class="home-button"><i class="ic ic-settings"></i>Settings</a>
      </span> -->
      <h1 class="post-title">Red Markets Negotiations: {{ negotiation.name }}</h1>
      <!-- <span id="menu-button" class="nav-button">
        <a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
      </span> -->
    </nav>
  </div>
</header>
{% endblock header %}

{% block content %}
<div id="negotiation" class="negotiation-wrapper">
  <div class="negotiation-sidebar">{% include 'partials/negotiation-sidebar.html' %}</div>
  <div class="negotiation-panel">{% include 'partials/negotiation-panel.html' %}</div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/socket.io.js"></script>
<script type="text/javascript" charset="utf-8">
  // const negotiation = new Negotiation("{{negotiation.name}}")
  var socket = io();
  var room = "{{negotiation.name}}";
  
  socket.on('connect', function() {
      console.log("Trying to join room " + room);
      socket.emit('join negotiation', {"room": room}, function(e) {
          update_from_data(e['negotiation']);
          update_phase(e['phase']);
      });
  });
  window.addEventListener('beforeunload', function(e) {
      console.log("Trying to leave room " + room);
      socket.emit('leave negotiation', {"room": room});
      socket.disconnect();
      return true;
  });
  socket.on('participants changed', (data) => {
      console.log(data);
      $("#negotiation .participants .count").html(data['participants'].length);
      $("#negotiation .participant-list li").each(function() {
          if (!data['participants'].includes($(this).attr('participant-id'))) {
              console.log("Removing element for participant id " + $(this).attr('participant-id'));
              console.log($(this));
              $(this).remove();
          }
      });
      var num_p;
      var listed = $('#negotiation .participant-list li');
      for (num_p = 0; num_p < data['participants'].length ; num_p++) {
          var p = data['participants'][num_p];
          console.log('Checking to see if ' + p + ' is in the participant list');
          console.log($('#negotiation .participant-list li[participant-id="' + p + '"]'));
          if ($('#negotiation .participant-list li[participant-id="' + p + '"]').length < 1) {
              $("#negotiation .participant-list").append(
                  '<li participant-id="' + p + '">' + p + '</li>'
              );
          }
      }
  });
  socket.on('negotiation updated', function(e) {
      update_from_data(e);
  });
  socket.on('negotiation state changed', function(e) {
      update_phase(e['phase'], e['transitioned_from']);
  });

  function update_from_data(e) {
      console.log(e);
      if ('taker_sway' in e) {
          // Update taker way
          var current_taker_sway = $('.swaytracker .taker-position .active').attr('id');
          change_swayslot(current_taker_sway, 't' + e.taker_sway);
      }
      if ('market_sway' in e) {
          var current_market_sway = $('.swaytracker .market-position .active').attr('id');
          change_swayslot(current_market_sway, 'm' + e.market_sway);
      }
      if ('client_name' in e) {
          $('.client-name').html(e['client_name']);
      }
      if ('taker_crew_name' in e) {
          $('.taker-crew-name').html(e['taker_crew_name']);
      }
      if ('negotiator_name' in e) {
          $('.negotiator-name').html(e['negotiator_name']);
      }
      if ('is_first_negotiation' in e) {
          $('#is-first-negotiation').prop('checked', e['is_first_negotiation'] == true)
      }
  }

  function update_phase(p, transition_from = null) {
      console.log(p);
      $('.phase-display-name').html(p['display_name']);
      $('.phase-description').html(p['description']);
      $('.phase-description-taker').html(p['description_taker']);
      var was_disabled = $('#state-previous').attr('disabled');
      var previous_button = $('#state-previous');
      var next_button = $('#state-next');
      previous_button.attr('disabled', p['previous_phase'] == null);
      next_button.attr('disabled', p['next_phase'] == null);
      if (previous_button.attr('disabled')) {
          previous_button.attr('src', '/static/images/button-previous-disabled.png');
      }
      else {
          previous_button.attr('src', '/static/images/button-previous.png');
      }
      if (next_button.attr('disabled')) {
          next_button.attr('src', '/static/images/button-next-disabled.png');
      }
      else {
          next_button.attr('src', '/static/images/button-next.png');
      }
  }

  function phase_on_next() {
      // Some client side validation when running in automatic should go here, before
      // the signal is sent to the server.
      console.log('next');
      socket.emit('set next phase', {"room": room});
  }

  function phase_on_prev() {
      console.log('previous');
      socket.emit('set previous phase', {"room": room});
  }

  function swayslot_on_dragstart(event) {
      var ev = event.originalEvent;
      ev.dataTransfer.setData("text/plain", ev.target.id);
      let img = new Image();
      img.src = '/static/images/drag.png';
      ev.dataTransfer.setDragImage(img, 0, 0);
      ev.dataTransfer.dropEffect = "move";
  }
  function swayslot_on_dragover(event) {
      event.preventDefault();
      event.originalEvent.dataTransfer.dropEffect = "move";
  }
  function swayslot_on_drop(event) {
      event.preventDefault();
      var source = event.originalEvent.dataTransfer.getData('text/plain');
      // Check to see if this is in the same track (id starts with same letter)
      var this_id = $(this).attr('id');
      if (this_id[0] == source[0] && this_id != source) {
          var key = (this_id[0] == 't' ? 'taker_sway' : 'market_sway');
          var value = this_id[1];
          var data = {
              "room": room,
          };
          data[key] = value;
          socket.emit('update negotiation', data, function (confirmation) {
              if (confirmation) {
                  change_swayslot(source, this_id);
              }
          });
      }
  }
  function change_swayslot(from, to) {
      $("#" + from).removeClass('active').unbind('dragstart').attr('draggable', false);
      $('#' + to).addClass('active').on('dragstart', swayslot_on_dragstart).attr('draggable', true);
  }

  function update_negotiation_settings(e) {
      var d = {
          "room": room,
      };
      var id = e.target['id'];
      console.log($('#' + id));
      var dom_obj = $('#' + id);
      var value;
      switch (dom_obj.attr('type')) {
        case 'checkbox':
          value = dom_obj.prop('checked');
          break;
        default:
          value = dom_obj.val();
          break;
      }
      // Regex is needed, since replace only functions on the first
      // occurrence otherwise.
      var key = id.replace(/-/g, '_');
      console.log("Key: " + key);
      console.log("Value: " + value);
      d[key] = value;
      socket.emit('update negotiation', d);
      if (id == 'manual-negotiation') {
          $('#' + id).unbind('change').attr('disabled', true);
          $('#' + id).siblings('.onoffswitch-label').attr('disabled', true);
      }
  }

  function toggle_fieldset(e) {
      console.log($(e.target));
      var parent = $(e.target).parents().parents('.fieldset').first();
      console.log(parent);
      if (parent.hasClass('fieldset-open')) {
          parent.removeClass('fieldset-open');
          parent.addClass('fieldset-closed');
      }
      else {
          parent.removeClass('fieldset-closed');
          parent.addClass('fieldset-open');
      }
  }
  // Drag/drog for the swaytracker
  var inputChanges = {};
  window.addEventListener('DOMContentLoaded', () => {
      $('.swaytracker .active').on('dragstart', swayslot_on_dragstart);
      $('.swaytracker .active').attr('draggable', true);
      $('.swaytracker .market-position .slot').on('dragover', swayslot_on_dragover);
      $('.swaytracker .taker-position .slot').on('dragover', swayslot_on_dragover);
      $('.swaytracker .market-position .slot').on('drop', swayslot_on_drop);
      $('.swaytracker .taker-position .slot').on('drop', swayslot_on_drop);

      if ($('.market-settings').length > 0) {
          // Bind update hooks
          // Text-fields update when the user hit 'enter'.
          $('#market-settings input').change(function(e) {
              console.log(e);
              update_negotiation_settings(e);
          });
      }

      $('#state-next').on('click', phase_on_next);
      $('#state-previous').on('click', phase_on_prev);

      // Disable the manual negotiation toggle if it's already on.
      $('#manual-negotiation[checked]').unbind('change').attr('disabled', true);
      $('#manual-negotiation[checked]').siblings('.onoffswitch-label').attr('disabled', true);

      // Add fieldset bindings
      $('.fieldset .fieldset-button').on('click', function(e) {
          toggle_fieldset(e);
      });
  });
</script>
{% endblock content %}