import { RoomInfo } from '@ucap-webmessenger/protocol-room';
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
import { Subscription } from 'rxjs';

export interface EditChatRoomDialogData {
  title: string;
  roomInfo: RoomInfo;
}

export interface EditChatRoomDialogResult {
  choice: boolean;
  roomName?: string;
  roomNameChangeTarget?: string;
  timeRoomInterval?: number;
  roomInfo: RoomInfo;
}

@Component({
  selector: 'app-layout-messenger-edit-chat-room',
  templateUrl: './edit-chat-room.dialog.component.html',
  styleUrls: ['./edit-chat-room.dialog.component.scss']
})
export class EditChatRoomDialogComponent implements OnInit, OnDestroy {
  roomName: string;
  inputForm: FormGroup;

  timerArray: { value: number; text: string }[];

  unitsI18nSubscription: Subscription;

  constructor(
    public dialogRef: MatDialogRef<
      EditChatRoomDialogData,
      EditChatRoomDialogResult
    >,
    @Inject(MAT_DIALOG_DATA) public data: EditChatRoomDialogData,
    private formBuilder: FormBuilder,
    private translateService: TranslateService
  ) {}

  ngOnInit(): void {
    this.inputForm = this.formBuilder.group({
      roomName: [
        this.data.roomInfo.roomName,
        !this.data.roomInfo.isTimeRoom ? [Validators.required] : []
      ],
      changeTarget: ['me'],
      timerInterval: [this.data.roomInfo.timeRoomInterval]
    });

    this.unitsI18nSubscription = this.translateService
      .get([
        'common.units.hourFrom',
        'common.units.minute',
        'common.units.second'
      ])
      .pipe(take(1))
      .subscribe(vs => {
        this.timerArray = [
          { value: 5, text: `5 ${vs['common.units.second']}` },
          { value: 10, text: `10 ${vs['common.units.second']}` },
          { value: 30, text: `30 ${vs['common.units.second']}` },
          { value: 60, text: `1 ${vs['common.units.minute']}` },
          { value: 300, text: `5 ${vs['common.units.minute']}` },
          { value: 600, text: `10 ${vs['common.units.minute']}` },
          { value: 1800, text: `30 ${vs['common.units.minute']}` },
          { value: 3600, text: `1 ${vs['common.units.hourFrom']}` },
          { value: 21600, text: `6 ${vs['common.units.hourFrom']}` },
          { value: 43200, text: `12 ${vs['common.units.hourFrom']}` },
          { value: 86400, text: `24 ${vs['common.units.hourFrom']}` }
        ];
      });
  }

  ngOnDestroy(): void {
    if (!!this.unitsI18nSubscription) {
      this.unitsI18nSubscription.unsubscribe();
    }
  }

  onClickChoice(choice: boolean): void {
    this.dialogRef.close({
      choice,
      roomName: this.inputForm.get('roomName').value,
      roomNameChangeTarget: this.inputForm.get('changeTarget').value,
      timeRoomInterval: this.inputForm.get('timerInterval').value,
      roomInfo: this.data.roomInfo
    });
  }
}