import {Plugins, AppState} from '@capacitor/core';
import {AfterViewChecked, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ChatMessage} from '../chat.message';
import {Setting} from '../setting';
import {ApiService} from '../api.service';
import {WebsocketListener} from '../websocket.listener';
import {WebsocketService} from '../websocket.service';
import {LocalNotifications} from '@ionic-native/local-notifications/ngx';
import {BackgroundMode} from '@ionic-native/background-mode/ngx';
import {AppComponent} from '../app.component';
import {Platform} from '@ionic/angular';

const {App} = Plugins;

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss'],
})
export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, WebsocketListener {
  messages: ChatMessage[] = [];
  userToken: string;
  userId: number;
  url: string;
  chatText: string;

  @ViewChild('chatPostArea') chatPostArea: ElementRef;
  @ViewChild('errorMessage') errorMessage: ElementRef;
  @ViewChild('chatTextArea') chatTextArea: ElementRef;
  @ViewChild('chatTypeArea') chatTypeArea: ElementRef;
  @ViewChild('buttonSend') buttonSend: ElementRef;

  private oldScrollHeight = 0;
  private messageOffset = 0;
  private messageLimit = 10;
  private hasBeenReloaded = false;
  private hasFocus = true;
  private isReconnection = false;

  public constructor(
    private apiService: ApiService,
    private websocketService: WebsocketService,
    private localNotifications: LocalNotifications,
    private backgroundMode: BackgroundMode,
    private platform: Platform
  ) {
    this.userToken = this.apiService.getFromStorage('token');
    this.userId = Number(this.apiService.getFromStorage('userId'));
    this.url = Setting.URL;
    this.websocketService.setListener(this);
    this.websocketService.initializeSocket(this.apiService.getFromStorage('chatToken'));
    this.backgroundMode.disableBatteryOptimizations();
    this.backgroundMode.disableWebViewOptimizations();
  }

  ngAfterViewInit(): void {
    this.chatPostArea.nativeElement.scroll(0, this.chatPostArea.nativeElement.scrollHeight);
  }

  ngAfterViewChecked(): void {
    if (this.oldScrollHeight !== this.chatPostArea.nativeElement.scrollHeight) {
      const scrollTop = this.chatPostArea.nativeElement.scrollTop;
      const clientHeight = this.chatPostArea.nativeElement.clientHeight;

      if (this.hasBeenReloaded) {
        this.chatPostArea.nativeElement.scroll(0, this.chatPostArea.nativeElement.scrollHeight - this.oldScrollHeight);
        this.hasBeenReloaded = false;
      } else if (scrollTop + clientHeight > this.oldScrollHeight - 10) {
        this.chatPostArea.nativeElement.scroll(0, this.oldScrollHeight);
      }

      this.oldScrollHeight = this.chatPostArea.nativeElement.scrollHeight;
    }
  }

  ngOnInit(): void {
    if (this.userToken === null) {
      return;
    }

    this.localNotifications.requestPermission();

    this.apiService.getChatHistory(this.userToken, this.messageOffset, this.messageLimit).toPromise()
      .then(
        (response) => {
          response.forEach(
            (message: ChatMessage) => {
              message.htmlMessage = this.parseHtml(message.message);

              this.messages.push(message);
              this.messageOffset++;
            }
          );
        }
      ).catch(
        (error) => {
          window.alert('Fehler ' + error.status + ': Verbindung zur Web-API gescheitert!');
        }
      );

    App.addListener('appStateChange', (state: AppState) => {
      this.hasFocus = state.isActive;
    });

    this.platform.backButton.subscribe(
      () => {
        if (window.confirm('Möchtest du wirklich ausloggen?')) {
          this.onLogout();
        }
      }
    );

    setInterval(
      () => {
        this.websocketService.sendKeepAliveMessage();
      }, 1000 * 60 // every minute
    );
  }

  onScroll(): void {
    if (this.chatPostArea.nativeElement.scrollTop === 0) {
      this.apiService.getChatHistory(this.userToken, this.messageOffset, this.messageLimit).subscribe(
        (response) => {
          response.reverse();

          response.forEach(
            (message: ChatMessage) => {
              message.htmlMessage = this.parseHtml(message.message);

              this.messages = [message].concat(this.messages);
              this.messageOffset++;
            }
          );

          this.hasBeenReloaded = true;
        }
      );
    }
  }

  onInput(event): void {
    this.chatTypeArea.nativeElement.style.height = '50px';
    this.chatTypeArea.nativeElement.style.height = event.target.scrollHeight > 50 ? event.target.scrollHeight + 'px' : '50px';

    if (this.chatTypeArea.nativeElement.clientHeight > window.innerHeight) {
      this.chatTypeArea.nativeElement.style.height = window.innerHeight + 'px';
    }
  }

  postMessage(): void {
      if (this.chatTextArea.nativeElement.value.trim() === '') {
        return;
      }

      this.websocketService.sendChatMessage(this.chatTextArea.nativeElement.value);
      this.chatTextArea.nativeElement.value = '';
  }

  onLogout() {
    this.apiService.storeData('token', null);

    AppComponent.token = null;
  }

  onChatMessage(message: ChatMessage): void {
    message.htmlMessage = this.parseHtml(message.message);

    this.messages.push(message);
    this.messageOffset++;

    if (this.hasFocus || message.userId === this.userId) {
      return;
    }

    this.triggerNotification(message);
  }

  onConnection(): void
  {
    this.errorMessage.nativeElement.style.display = 'none';

    this.enableSendButton();

    if (this.isReconnection) {
      this.apiService.getChatMessagesMissed(this.userToken, this.messages[this.messages.length - 1].id).toPromise()
        .then(
          (messagesMissed) => {
            if (messagesMissed.length === 0) {
              return;
            }

            for (const message of messagesMissed) {
              message.htmlMessage = this.parseHtml(message.message);

              this.messages.push(message);
              this.messageOffset++;
            }
          }
        ).catch(
          (error) => {
            console.log('Failed to load messages missed after reconnect!', error);
          }
      );
    }

    this.isReconnection = true;
  }

  onReconnect(): void
  {
    this.isReconnection = true;
  }

  onError(message: string): void
  {
    this.errorMessage.nativeElement.style.display = 'block';
    this.errorMessage.nativeElement.innerText = message;
    this.disableSendButton();
  }

  citeUsername(username: string): void
  {
    this.insertIntoTextareaCursorPosition('@' + username);
  }

  citeMessage(username: string, message: string): void
  {
    const originalMessage = [];

    message.split('\n').forEach(
      (paragraph: string) => {
        if (paragraph.substr(0, 1) !== '>') {
          originalMessage.push(paragraph);
        }
      }
    );

    this.insertIntoTextareaCursorPosition('> @' + username + ': ' +  originalMessage.join('\n') + '\n');
  }

  triggerNotification(message: ChatMessage): void
  {
    this.localNotifications.schedule(
      {
        title: message.username,
        text: message.message,
        id: 1,
        priority: 2,
        lockscreen: true,
        autoClear: true,
        icon: Setting.URL + '/user/' + message.userId + '/avatar?token=' + this.userToken,
        smallIcon: 'ic_stat_notification_icon_enabled',
        led: '#ff00ff',
        trigger: { at: new Date(new Date().getTime() + 1000) },
        sound: 'file://assets/audio/murloc.wav',
        vibrate: true
      }
    );
  }

  private hasChatMessage(message: ChatMessage): boolean
  {
    for (const messageStored of this.messages) {
      if (messageStored.id === message.id) {
        return true;
      }
    }

    return false;
  }

  private parseHtml(messageText: string): string
  {
    let parsedText = '';
    let isInsideCite = false;
    let isInsideUsername = false;

    for (const char of messageText) {
      switch (char) {
        case '>':
          if (isInsideCite) {
            parsedText += '</div>';
          }

          parsedText += '<div class="message-cite">';
          isInsideCite = true;
          break;

        case '\n':
          parsedText += isInsideCite ? '</div>' : '<br>';
          break;

        default:
          if (char === ' ' && isInsideUsername) {
            isInsideUsername = false;
            parsedText += '</span>';
          }

          parsedText += char;
      }
    }

    if (isInsideCite) {
      parsedText += '</div>';
    }

    const matches = parsedText.match(/(\s|^)@\w+/g);

    if (matches === null) {
      return parsedText;
    }

    matches.forEach(
      (match) => {
        parsedText = parsedText.replace(match, '<span class="message-cite-username">' + match.substr(match.indexOf('@') + 1) + '</span>');
      }
    );

    return parsedText;
  }

  private insertIntoTextareaCursorPosition(text: string): void
  {
    const textarea = this.chatTextArea.nativeElement;

    const textLength = textarea.value.length;
    const messagePartA = textarea.value.substr(0, textarea.selectionStart) + (textarea.selectionStart > 0 ? '\n' : '');
    const messagePartB = textarea.value.substr(textarea.selectionStart, textLength);

    textarea.value = messagePartA.trim() + text + messagePartB.trim();
    textarea.focus();
  }

  private enableSendButton(): void
  {
    this.buttonSend.nativeElement.classList.add('button-send-online');
    this.buttonSend.nativeElement.classList.remove('button-send-offline');
    this.buttonSend.nativeElement.disabled = false;
  }

  private disableSendButton(): void
  {
    this.buttonSend.nativeElement.classList.remove('button-send-online');
    this.buttonSend.nativeElement.classList.add('button-send-offline');
    this.buttonSend.nativeElement.disabled = true;
  }
}