import '../common/jquery.litelay';
  
  const ChatController = function ($scope, chat, $element) {
      /**
       * Cache chat elements.
       */
      var chatScreen = $element.find('.chat-screen'),
          chatMessages = $element.find('.chat-messages'),
          chatInput = $element.find('.chat-input textarea'),
          chatViewPort = $element.find('.chat-viewport');
  
  
      // Display chat loading message.
      chatViewPort.litelay({message: 'Trying to connect to chat server...', spinner: true});
  
      // Set .chat-screen height to ensure it fits into the window.
      // Do the same on window resize.
      setChatScreenSize();
      $(window).on('resize', setChatScreenSize);
  
      // Connect to chat server
      chat.connect();
  
      /**
       * Handle `enter` key on the chat input box.
       */
      chatInput.keydown(function (e) {
          if (e.which === 13) {
              e.preventDefault();
              $scope.chat();
          }
      });
  
      /**
       * Sends a chat message that is styped into the chat input box.
       */
      $scope.chat = function () {
          if ($scope.msg.trim() === '') return;
  
          if ($scope.msg.length > 200) {
              return renderSystemMessage({ content: 'Your chat message is longer than 200 characters limit. Please revise it before sending again.' });
          }
  
          chat.say($scope.msg, 'global');
  
          chatInput.controller('ngModel').$setViewValue('');
          chatInput.controller('ngModel').$render();
      };
  
      /**
       * Handle operations when chat has connected.
       */
      chat.on('connect', function () {
          // Remove loading message.
          if (chatViewPort.data('litelay')) {
              chatViewPort.litelay({off: true});
          }
      });
  
      /**
       * Handle disconnections from socket.
       */
      chat.on('disconnect', function () {
          // Display chat connection lost message.
          chatViewPort.litelay({message: 'Connection to chat server is lost.<br>Trying to reconnect you...', spinner: true});
      });
  
      /**
       * Render chat when it arrives.
       */
      chat.on('chat', function (chat) {
          renderChatMessage(chat);
      });
  
      /**
       * Render most recent chats when they arrive.
       */
      chat.on('recent-chats', function (chats) {
          chatMessages.html('');
          _(chats).each(renderChatMessage);
      });
  
      /**
       * Update user list when one comes.
       */
      chat.on('user-list', function (userList) {
          $scope.userList = userList;
          $scope.userListLength = _(userList).size();
          $scope.user = $scope.userList[DataStore.user.username];
  
          if ($scope.user === undefined) {
              $element.find('.chat-composer').mousedown(function (e) {
                  chatViewPort.litelay({message: 'You must sign in before you can chat.<p><a href="/signup/">Please create a FootyRoom account if you don\'t have one.</a>'});
  
                  $element.one('click', function () {
                      chatViewPort.litelay({off: true});
                  });
              });
          }
  
          $scope.$apply();
      });
  
      /**
       * Handle system messages.
       */
      chat.on('system', function (message) {
          renderSystemMessage(message);
      });
  
      /**
       * Renders a message from the chat onto the chat screen.
       *
       * @param  {Object} chat
       */
      function renderChatMessage(chat) {
          renderMessage(
              '<li class="chat-message">' +
                  ((chat.userRole >= 20) ? '<span class="icn-whistle badge" title="Moderator"></span>' : '') +
                  '<a href="/profile/' + chat.username + '" target="_blank" class="username" style="color: ' + chat.chatColor + '">' + chat.username + ': </a>' +
                  '<span class="message">' + chat.msg + '</span>' +
              '</li>'
          );
      }
  
      /**
       * Render a system message on the chat screen.
       *
       * @param  {Object} message
       */
      function renderSystemMessage(message) {
          renderMessage(
              '<li class="chat-message">' +
                  '<span class="message">' + message.content + '</span>' +
              '</li>'
          );
      }
  
      /**
       * Renders a message on the chat screen.
       *
       * @param  {String} message HTML to append to chat screen.
       */
      function renderMessage(message) {
          var scrollHeight = chatMessages.prop('scrollHeight');
  
          chatMessages.append(message);
  
          if (scrollHeight === (chatMessages.outerHeight() + chatMessages.scrollTop())) {
              chatMessages.scrollTop(chatMessages.prop('scrollHeight'));
          }
      }
  
      /**
       * Sets .chat-screen height to ensure it fits into the window.
       */
      function setChatScreenSize() {
          // TODO: what are these 146 1 ?? Do something about it.
          chatScreen.css('height', $(window).height() - 146 - 1);
      }
  
      /**
       * Sets users color.
       *
       * @param {String} color
       */
      $scope.setUserColor = function (color) {
          chat.emit('set-color', color);
      };
  };
  
  ChatController.$inject = ['$scope', 'chat', '$element'];
  export default ChatController;