import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import {
  StickerInfo,
  StickerFilesInfo,
  StickerUtil,
  StickerMap
} from '@ucap-webmessenger/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MatSlideToggleChange, MatSelectChange } from '@angular/material';
import {
  TranslationEventJson,
  MassTranslationEventJson,
  EventType
} from '@ucap-webmessenger/protocol-event';
import { TranslationSaveResponse } from '@ucap-webmessenger/api-common';

@Component({
  selector: 'ucap-translation-section',
  templateUrl: './translation-section.component.html',
  styleUrls: ['./translation-section.component.scss']
})
export class TranslationSectionComponent implements OnInit {
  @Input()
  destLocale: string;
  @Input()
  simpleView: boolean;
  @Input()
  preView: boolean;
  @Input()
  translationPreviewInfo: {
    previewInfo: TranslationSaveResponse | null;
    translationType: EventType.Translation | EventType.MassTranslation;
  };

  @Output()
  changeTranslationSimpleview = new EventEmitter<boolean>();
  @Output()
  changeTranslationPreview = new EventEmitter<boolean>();
  @Output()
  changeDestLocale = new EventEmitter<string>();
  @Output()
  cancelTranslation = new EventEmitter<void>();
  @Output()
  sendTranslationMessage = new EventEmitter<{
    previewInfo: TranslationSaveResponse | null;
    translationType: EventType.Translation | EventType.MassTranslation;
  }>();

  isShowTranslationSimpleview = false;
  isShowTranslationPreview = false;

  translationDestList: {
    key: string;
    text: string;
  }[] = [
    { key: 'af', text: 'Afrikaans' },
    { key: 'sq', text: 'Albanian' },
    { key: 'am', text: 'Amharic' },
    { key: 'ar', text: 'Arabic' },
    { key: 'hy', text: 'Armenian' },
    { key: 'az', text: 'Azeerbaijani' },
    { key: 'eu', text: 'Basque' },
    { key: 'be', text: 'Belarusian' },
    { key: 'bn', text: 'Bengali' },
    { key: 'bs', text: 'Bosnian' },
    { key: 'bg', text: 'Bulgarian' },
    { key: 'ca', text: 'Catalan' },
    { key: 'ceb', text: 'Cebuano' },
    { key: 'zh-CN', text: 'Chinese(Simplified)' },
    { key: 'zh-TW', text: 'Chinese(Traditional)' },
    { key: 'co', text: 'Corsican' },
    { key: 'hr', text: 'Croatian' },
    { key: 'cs', text: 'Czech' },
    { key: 'da', text: 'Danish' },
    { key: 'nl', text: 'Dutch' },
    { key: 'en', text: 'English' },
    { key: 'eo', text: 'Esperanto' },
    { key: 'fi', text: 'Finnish' },
    { key: 'fr', text: 'French' },
    { key: 'fy', text: 'Frisian' },
    { key: 'gl', text: 'Galician' },
    { key: 'ka', text: 'Georgian' },
    { key: 'de', text: 'German' },
    { key: 'el', text: 'Greek' },
    { key: 'gu', text: 'Gujarati' },
    { key: 'ht', text: 'Haitian Creole' },
    { key: 'ha', text: 'Hausa' },
    { key: 'haw', text: 'Hawaiian' },
    { key: 'iw', text: 'Hebrew' },
    { key: 'hi', text: 'Hindi' },
    { key: 'hmn', text: 'Hmong' },
    { key: 'hu', text: 'Hungarian' },
    { key: 'is', text: 'Icelandic' },
    { key: 'ig', text: 'Igbo' },
    { key: 'id', text: 'Indonesian' },
    { key: 'ga', text: 'Irish' },
    { key: 'it', text: 'Italian' },
    { key: 'ja', text: 'Japanese' },
    { key: 'jw', text: 'Javanese' },
    { key: 'kn', text: 'Kannada' },
    { key: 'kk', text: 'Kazakh' },
    { key: 'km', text: 'Khmer' },
    { key: 'ko', text: 'Korean' },
    { key: 'ku', text: 'Kurdish' },
    { key: 'ky', text: 'Kyrgyz' },
    { key: 'lo', text: 'Lao' },
    { key: 'la', text: 'Latin' },
    { key: 'lv', text: 'Latvian' },
    { key: 'lt', text: 'Lithuanian' },
    { key: 'lb', text: 'Luxembourgish' },
    { key: 'mk', text: 'Macedonian' },
    { key: 'mg', text: 'Malagasy' },
    { key: 'ms', text: 'Malay' },
    { key: 'ml', text: 'Malayalam' },
    { key: 'mi', text: 'Maori' },
    { key: 'mr', text: 'Marathi' },
    { key: 'mn', text: 'Mongolian' },
    { key: 'my', text: 'Myanmar(Burmese)' },
    { key: 'ne', text: 'Nepali' },
    { key: 'no', text: 'Norwegian' },
    { key: 'ny', text: 'Nyanja(Chichewa)' },
    { key: 'ps', text: 'Pashto' },
    { key: 'fa', text: 'Persian' },
    { key: 'pl', text: 'Polish' },
    { key: 'pt', text: 'Portuguese' },
    { key: 'pa', text: 'Punjabi' },
    { key: 'ro', text: 'Romanian' },
    { key: 'ru', text: 'Russian' },
    { key: 'sm', text: 'Samoan' },
    { key: 'gd', text: 'Scots Gaelic' },
    { key: 'sr', text: 'Serbian' },
    { key: 'st', text: 'Sesotho' },
    { key: 'sn', text: 'Shona' },
    { key: 'sd', text: 'Sindhi' },
    { key: 'si', text: 'Sinhala(Sinhalese)' },
    { key: 'sk', text: 'Slovak' },
    { key: 'sl', text: 'Slovenian' },
    { key: 'so', text: 'Somali' },
    { key: 'es', text: 'Spanish' },
    { key: 'su', text: 'Sundanese' },
    { key: 'sw', text: 'Swahili' },
    { key: 'sv', text: 'Swedish' },
    { key: 'tl', text: 'Tagalog(Filipino)' },
    { key: 'tg', text: 'Tajik' },
    { key: 'ta', text: 'Tamil' },
    { key: 'te', text: 'Telugu' },
    { key: 'th', text: 'Thai' },
    { key: 'tr', text: 'Turkish' },
    { key: 'uk', text: 'Ukrainian' },
    { key: 'ur', text: 'Urdu' },
    { key: 'uz', text: 'Uzbek' },
    { key: 'vi', text: 'Vietnamese' },
    { key: 'cy', text: 'Welsh' },
    { key: 'xh', text: 'Xhosa' },
    { key: 'yi', text: 'Yiddish' },
    { key: 'yo', text: 'Yoruba' },
    { key: 'zu', text: 'Zulu' }
  ];

  translationForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.translationForm = this.formBuilder.group({
      destType: [this.destLocale]
    });
  }

  onChangeSelection(event: MatSelectChange) {
    this.destLocale = event.value;
    this.changeDestLocale.emit(this.destLocale);
  }

  onChangToggleSimpleview(event: MatSlideToggleChange) {
    this.isShowTranslationSimpleview = event.checked;
    this.changeTranslationSimpleview.emit(event.checked);
  }

  onChangTogglePreview(event: MatSlideToggleChange) {
    this.isShowTranslationPreview = event.checked;
    this.changeTranslationPreview.emit(event.checked);
  }

  onClickSendTranslationMessage(translationInfo: {
    previewInfo: TranslationSaveResponse | null;
    translationType: EventType.Translation | EventType.MassTranslation;
  }) {
    this.sendTranslationMessage.emit(translationInfo);
  }

  onClickTranslationCancel() {
    this.cancelTranslation.emit();
  }
}