$(function() {
  // General configuration for popover contents.
  var contentContext = {
    keypress: {
      layers: [
        {
          name: 'None',
          class: 'layer-key layer-key--disabled',
          primary: 'btn-primary'
        },
        {
          name: 'Mod',
          class: 'layer-key layer-key--mod',
          primary: ''
        },
        {
          name: 'Fn',
          class: 'layer-key layer-key--fn',
          primary: ''
        },
        {
          name: 'Mouse',
          class: 'layer-key layer-key--mouse',
          primary: ''
        }
      ],
      modifiers: {
        left: [
          {
            name: 'LShift',
            primary: 'btn-primary'
          },
          {
            name: 'LCtrl',
            primary: ''
          },
          {
            name: 'LSuper',
            primary: ''
          },
          {
            name: 'LAlt',
            primary: 'btn-primary'
          }
        ],
        right: [
          {
            name: 'RShift',
            primary: ''
          },
          {
            name: 'RCtrl',
            primary: ''
          },
          {
            name: 'RSuper',
            primary: ''
          },
          {
            name: 'RAlt',
            primary: ''
          }
        ]
      },
      scancode: [
        {
          groupName: 'Alphabet',
          groupValues: [
            {
              value: 'A',
              dataExplanation: '',
              label: 'A'
            },
            {
              value: 'B',
              dataExplanation: '',
              label: 'B'
            },
            {
              value: 'C',
              dataExplanation: '',
              label: 'C'
            },
            {
              value: 'D',
              dataExplanation: '',
              label: 'D'
            },
            {
              value: 'E',
              dataExplanation: '',
              label: 'E'
            },
            {
              value: 'F',
              dataExplanation: '',
              label: 'F'
            },
            {
              value: 'G',
              dataExplanation: '',
              label: 'G'
            },
            {
              value: 'H',
              dataExplanation: '',
              label: 'H'
            },
            {
              value: 'I',
              dataExplanation: '',
              label: 'I'
            },
            {
              value: 'J',
              dataExplanation: '',
              label: 'J'
            },
            {
              value: 'K',
              dataExplanation: '',
              label: 'K'
            },
            {
              value: 'L',
              dataExplanation: '',
              label: 'L'
            },
            {
              value: 'M',
              dataExplanation: '',
              label: 'M'
            },
            {
              value: 'N',
              dataExplanation: '',
              label: 'N'
            },
            {
              value: 'O',
              dataExplanation: '',
              label: 'O'
            },
            {
              value: 'P',
              dataExplanation: '',
              label: 'P'
            },
            {
              value: 'Q',
              dataExplanation: '',
              label: 'Q'
            },
            {
              value: 'R',
              dataExplanation: '',
              label: 'R'
            },
            {
              value: 'S',
              dataExplanation: '',
              label: 'S'
            },
            {
              value: 'T',
              dataExplanation: '',
              label: 'T'
            },
            {
              value: 'U',
              dataExplanation: '',
              label: 'U'
            },
            {
              value: 'V',
              dataExplanation: '',
              label: 'V'
            },
            {
              value: 'W',
              dataExplanation: '',
              label: 'W'
            },
            {
              value: 'X',
              dataExplanation: '',
              label: 'X'
            },
            {
              value: 'Y',
              dataExplanation: '',
              label: 'Y'
            },
            {
              value: 'Z',
              dataExplanation: '',
              label: 'Z'
            }
          ]
        },
        {
          groupName: 'Number Row',
          groupValues: [
            {
              value: '1_exclamation',
              dataExplanation: '',
              label: '1 !'
            },
            {
              value: '2_at',
              dataExplanation: '',
              label: '2 @'
            },
            {
              value: '3_hashmark',
              dataExplanation: '',
              label: '3 #'
            },
            {
              value: '4_dollar',
              dataExplanation: '',
              label: '4 $'
            },
            {
              value: '5_percent',
              dataExplanation: '',
              label: '5 %'
            },
            {
              value: '6_caret',
              dataExplanation: '',
              label: '6 ^'
            },
            {
              value: '7_ampersand',
              dataExplanation: '',
              label: '7 &'
            },
            {
              value: '8_asterisk',
              dataExplanation: '',
              label: '8 *'
            },
            {
              value: '9_left-parenthesis',
              dataExplanation: '',
              label: '9 ('
            },
            {
              value: '0_right-parenthesis',
              dataExplanation: '',
              label: '0 )'
            }
          ]
        },
        {
          groupName: 'Whitespace',
          groupValues: [
            {
              value: 'Return',
              dataExplanation: 'Enter',
              label: 'Return'
            },
            {
              value: 'Esc',
              dataExplanation: 'Esc',
              label: 'Escape'
            },
            {
              value: 'Backspace',
              dataExplanation: '',
              label: 'Backspace'
            },
            {
              value: 'Tab',
              dataExplanation: '',
              label: 'Tab'
            },
            {
              value: 'Spacebar',
              dataExplanation: '',
              label: 'Spacebar'
            }
          ]
        },
        {
          groupName: 'Punctuation',
          groupValues: [
            {
              value: 'dash_underscore',
              dataExplanation: '',
              label: '- _'
            },
            {
              value: 'equal_plus',
              dataExplanation: '',
              label: '= +'
            },
            {
              value: 'left-bracket_left-brace',
              dataExplanation: '',
              label: '[ {'
            },
            {
              value: 'right-bracket_right-brace',
              dataExplanation: '',
              label: '] }'
            },
            {
              value: 'backsalsh_pipe',
              dataExplanation: '',
              label: '\ |'
            },
            {
              value: 'semicolon_colon',
              dataExplanation: '',
              label: '; :'
            },
            {
              value: 'single-quote_double-quote',
              dataExplanation: '',
              label: '\' "'
            },
            {
              value: 'grave-accent_tilde',
              dataExplanation: '',
              label: '` ~'
            },
            {
              value: 'comma_less-than',
              dataExplanation: '',
              label: ', <'
            },
            {
              value: 'period_greater-than',
              dataExplanation: '',
              label: '. >'
            },
            {
              value: 'slash_question',
              dataExplanation: '',
              label: '/ ?'
            }
          ]
        }
      ],
      secondaryRole: [
        {
          groupName: '',
          groupValues: [
            {
              value: 'None',
              label: 'None',
            }
          ]
        },
        {
          groupName: 'Modifiers',
          groupValues: [
            {
              value: 'LShift',
              label: 'LShift'
            },
            {
              value: 'LCtrl',
              label: 'LCtrl'
            },
            {
              value: 'LSuper',
              label: 'LSuper'
            },
            {
              value: 'LAlt',
              label: 'LAlt'
            },
            {
              value: 'RShift',
              label: 'RShift'
            },
            {
              value: 'RCtrl',
              label: 'RCtrl'
            },
            {
              value: 'RSuper',
              label: 'RSuper'
            },
            {
              value: 'RAlt',
              label: 'RAlt'
            }
          ]
        },
        {
          groupName: 'Layer Switcher',
          groupValues: [
            {
              value: 'Mod',
              label: 'Mod'
            },
            {
              value: 'Mouse',
              label: 'Mouse'
            },
            {
              value: 'Fn',
              label: 'Fn'
            }
          ]
        }
      ]
    },
    macro: {
      macros: [
        {
          value: 'Select macro',
          name: 'Select macro'
        },
        {
          value: 'Latex custom equation',
          name: 'Latex custom equation'
        },
        {
          value: 'Process shops xml',
          name: 'Process shops xml'
        },
      ]
    },
    switchKeymap: {
      layouts: [
        {
          value: 'Select keymap',
          name: 'Select keymap',
          dataImage: 'base-layer--blank.svg',
          abbrev: '',
          dataAbbrevImage: ''
        },
        {
          value: 'Factory keymap',
          name: 'Factory keymap',
          dataImage: 'base-layer.svg',
          abbrev: 'QWE',
          dataAbbrevImage: 'segments_qwe.svg'
        },
        {
          value: 'Dvorak',
          name: 'Dvorak',
          dataImage: 'base-layer--dvorak.svg',
          abbrev: 'DVR',
          dataAbbrevImage: 'segments_dvr.svg'
        }
      ]
    }
  };

  // Handlebars template for Popover top.
  var keyEditorTopSource = $('#key-editor-top__source').html();
  var keyEditorTopTemplate = Handlebars.compile(keyEditorTopSource);
  var keyEditorTopContext = {
    buttons: [
      {
        type: 'primary',
        icon: 'fa-keyboard-o',
        title: 'Keypress',
        content: 'keypress'
      },
      {
        type: 'default',
        icon: 'fa-clone', // The icon for the tab will be a layer icon in svg. But for the mockup it was easier to just use something similar from fontawesome.
        title: 'Layer',
        content: 'layer'
      },
      {
        type: 'default',
        icon: 'fa-mouse-pointer',
        title: 'Mouse',
        content: 'mouse'
      },
      {
        type: 'default',
        icon: 'fa-play',
        title: 'Macro',
        content: 'macro'
      },
      {
        type: 'default',
        icon: 'fa-keyboard-o',
        title: 'Keymap',
        content: 'switchKeymap'
      },
      {
        type: 'default',
        icon: 'fa-ban',
        title: 'None',
        content: 'none'
      }
    ]
  };
  $('#key-editor-top__target').html(keyEditorTopTemplate(keyEditorTopContext));

  // Handlebars template for Popover bottom.
  var keyEditorBottomSource = $('#key-editor-bottom__source').html();
  var keyEditorBottomTemplate = Handlebars.compile(keyEditorBottomSource);
  var keyEditorBottomContext = {};
  $('#key-editor-bottom__target').html(keyEditorBottomTemplate(keyEditorBottomContext));

  // Handlebars template for Popover content to be displayed by default.
  var keyEditorContentSource = $('#key-editor-content__source--keypress').html();
  var keyEditorContentTemplate = Handlebars.compile(keyEditorContentSource);
  $('#key-editor-content__target').html(keyEditorContentTemplate(contentContext.keypress));


  // ================================
  // General library initializations.
  // ================================

  // Init select2.
  $('select').select2({
    templateResult: formatState
  });

  // Init tooltips.
  $('[data-toggle="tooltip"]').tooltip()

  // Init popover-title tabs.
  $('li:first', '.popover-title.menu-tabs').addClass('active');


  // ===============
  // Event handlers.
  // ===============

  $('.popover-menu').on('click', 'button', function() {
    $('.btn-primary', '.popover-menu').removeClass('btn-primary').addClass('btn-default');
    $(this).addClass('btn-primary').blur();
    var tplName = $(this).data('content');
    var contentSource = $('#key-editor-content__source--' + tplName).html();
    var contentTemplate = Handlebars.compile(contentSource);
    $('#key-editor-content__target').html(contentTemplate(contentContext[tplName]));
    initSelect2items();
  });

  $('.popover-menu').on('click', 'a.menu-tabs--item', function() {
    $('.popover-menu.nav-tabs li.active').removeClass('active');
    $(this).parent('li').addClass('active');
    var tplName = $(this).data('content');
    var contentSource = $('#key-editor-content__source--' + tplName).html();
    var contentTemplate = Handlebars.compile(contentSource);
    $('#key-editor-content__target').html(contentTemplate(contentContext[tplName]));
    var noSearch = false;
    switch (tplName) {
      case 'layer':
        noSearch = true;

      case 'keypress':
        _keypress_event_handlers();

      case 'mouse':
        _mouse_event_handlers();

      default:
        initSelect2items(noSearch);
    }
  });


  var _keypress_event_handlers = function() {
    $('.modifiers').on('click', 'button', function() {
      $(this).toggleClass('btn-primary').blur();
    });

    $('.btn--capture-keystroke').on('click', function(e) {
      $('.btn--capture-keystroke').toggle();
      _toggleScancodeForm();
    });

    $('.layer-action--buttons').on('click', '.layer-key', function(e) {
      $this = $(this);
      $('.layer-key.btn-primary', '.layer-action--buttons').removeClass('btn-primary');
      $this.addClass('btn-primary').blur();
      if ($this.hasClass('layer-key--disabled')) {
        // Enable all form controls in .global-key-setup
        $('button, select', '.global-key-setup').prop('disabled', false);
        $('.global-key-setup').removeClass('disabled');
        $('.disabled-state--text').hide();
      }
      else {
        // Disable all form controls in .global-key-setup
        $('button, select', '.global-key-setup').prop('disabled', true);
        $('.global-key-setup').addClass('disabled');
        $('.disabled-state--text').show();
      }
    });
  };
  _keypress_event_handlers();

  var _mouse_event_handlers = function() {
    $('.mouse__action--type').on('click', 'a', function(e) {
      var _this = $(this),
          _mouse_config_name = _this.data('config');
      $('.mouse__config').hide();
      $('.mouse__config--' + _mouse_config_name).show();
      $('.mouse__action--type li').removeClass('active');
      _this.parents('li').addClass('active');
    });

    $('.mouse__action--config').on('click', '.btn', function(e) {
      var _buttons = $('.mouse__action--config .btn'),
          _mouseActionTypes = $('.mouse__action--type a'),
          _currentMouseAction = $('.mouse__action--type li.active a'),
          _this = $(this);

      _buttons.removeClass('btn-primary');
      _this.addClass('btn-primary');
      _mouseActionTypes.removeClass('selected');
      _currentMouseAction.addClass('selected');
    });
  }
});


// ==========================
// Select2 related functions.
// ==========================

function initSelect2items(noSearch) {
  var noSearch = typeof noSearch !== 'undefined' ?  noSearch : false,
      noSearchValue = 0;
  if (noSearch) {
    var noSearchValue = Infinity;
  }
  $('select').select2({
    templateResult: formatState,
    minimumResultsForSearch: noSearchValue
  });

  $('select').on('select2:select', function(e) {
    var selected = $(e.params.data.element);
    var image = selected.data('image');
    console.log(e, selected, image);
    $('img', '.layout-preview').attr('src', 'images/' + image);
  });

  $('.layer-toggle').on('select2:select', function(e) {
    $('.layer-help').toggle();
  });

  $('.layout-switcher').on('select2:open', function(e) {
    $('.layout-preview').css('opacity', '0.1');
  }).on('select2:close', function(e) {
    $('.layout-preview').css('opacity', '1');
  });
}

function formatState(state) {
   if (!state.id) { return state.text; }
   var dataExplanation = $(state.element).data('explanation');
   var dataAbbrev = $(state.element).data('abbrev');
   var dataAbbrevImage = $(state.element).data('abbrev-image');
   var $state = $('<span class="select2-item">' + state.text + '</span>')
   if (dataExplanation != '' && typeof dataExplanation != 'undefined') {
     $('<span class="scancode--explanation"> (' + dataExplanation + ')</span>').appendTo($state);
   }
   if (dataAbbrevImage != '' && typeof dataAbbrevImage != 'undefined') {
     $('<img />')
       .attr('src', 'images/' + dataAbbrevImage)
       .attr('class', 'layout-segment-code')
       .prependTo($state);
     $state.addClass('keymap-name--wrapper');
   }
   return $state;
}


// ===============
// Misc functions.
// ===============

function _toggleScancodeForm() {
  var disabledState = $('.btn--capture-keystroke__stop').is(':visible');
  $('button', '.modifiers__left, .modifiers__right').prop('disabled', disabledState);
  $('select.scancode').prop('disabled', disabledState);
  $('b', '.scancode-options').toggleClass('disabled');
}