import { Component, OnInit, Input } from '@angular/core';
import { MatStepper, MatDialog } from '@angular/material';
import { CaDeploymentChannelsModalComponent } from '../ca-deployment-channels-modal/ca-deployment-channels-modal.component';

@Component({
  selector: 'byte-ca-deployment-channels',
  templateUrl: './ca-deployment-channels.component.html',
  styleUrls: ['./ca-deployment-channels.component.scss']
})
export class CaDeploymentChannelsComponent implements OnInit {

  @Input() stepper: MatStepper;

  agentChannels: Array<any> = new Array<any>();
  channels: Array<any> = new Array<any>();
  step = -1;

  constructor(
    private matDialog: MatDialog
  ) { }

  ngOnInit() {
    this.channels = [
      {
        channelId: 101,
        channelName: 'Facebook Messenger',
        channelImage: 'https://img.icons8.com/color/452/facebook-messenger.png',
        fields: [
          {
            name: 'webhook',
            label: 'webhook',
            maxlength: 200,
            required: true,
            traductions: { 'es': 'URL de devolución de llamada', 'en': 'Webhook' }
          },
          {
            name: 'verification-token',
            label: 'verification-token',
            maxlength: 80,
            required: true,
            traductions: { 'es': 'Token de verificación', 'en': 'Verification token' }
          },
          {
            name: 'access-token',
            label: 'access-token',
            maxlength: 80,
            required: true,
            traductions: { 'es': 'Token de acceso', 'en': 'Access token' }
          }
        ]
      },

      {
        channelId: 103,
        channelName: 'WhatsApp',
        channelImage: 'https://img.icons8.com/color/452/whatsapp.png',
        name: 'Canal de wasap',
        fields: [
          {
            name: 'account-identifier',
            label: 'account-identifier',
            maxlength: 80,
            type: 'text',
            required: true,
            traductions: { 'es': 'Identificador de cuenta', 'en': 'Account identifier' }
          },
          {
            name: 'authentication-token',
            label: 'authentication-token',
            maxlength: 80,
            type: 'text',
            required: true,
            traductions: { 'es': 'Token de autenticación', 'en': 'Authentication token' }
          },
          {
            name: 'twillio-number',
            label: 'account-identifier',
            type: 'number',
            required: true,
            traductions: { 'es': 'Número de Twillio', 'en': 'Twillio number' }
          }
        ]
      }
    ]

    this.agentChannels = [
      {
        id: 1,
        channelId: 101,
        channelName: 'Facebook Messenger',
        channelImage: 'https://img.icons8.com/color/452/facebook-messenger.png',
        name: 'Canal de mesenyer',
        active: false,
        fields: [
          {
            id: 306,
            name: 'webhook',
            label: 'webhook',
            value: 'https://developers.facebook.com/docs/messenger-platform/webhook/',
            maxlength: 200,
            required: true,
            traductions: { 'es': 'URL de devolución de llamada', 'en': 'Webhook' }
          },
          {
            id: 305,
            name: 'verification-token',
            label: 'verification-token',
            value: 'a50a01069bd00e0e269ff639d9ca7def',
            maxlength: 80,
            required: true,
            traductions: { 'es': 'Token de verificación', 'en': 'Verification token' }
          },
          {
            id: 304,
            name: 'access-token',
            label: 'access-token',
            value: 'bd01-0e0e-269f-f639',
            maxlength: 80,
            required: true,
            traductions: { 'es': 'Token de acceso', 'en': 'Access token' }
          }
        ]
      },

      {
        id: 3,
        channelId: 103,
        channelName: 'WhatsApp',
        channelImage: 'https://img.icons8.com/color/452/whatsapp.png',
        name: 'Canal de wasap',
        active: true,
        fields: [
          {
            id: 303,
            name: 'account-identifier',
            label: 'account-identifier',
            value: 'my-msn-account',
            maxlength: 80,
            type: 'text',
            required: true,
            traductions: { 'es': 'Identificador de cuenta', 'en': 'Account identifier' }
          },
          {
            id: 302,
            name: 'authentication-token',
            label: 'authentication-token',
            value: 'a50a01069bd00e0e269ff639d9ca7def',
            maxlength: 80,
            type: 'text',
            required: true,
            traductions: { 'es': 'Token de autenticación', 'en': 'Authentication token' }
          },
          {
            id: 301,
            name: 'twillio-number',
            label: 'account-identifier',
            value: '957355738',
            type: 'number',
            required: true,
            traductions: { 'es': 'Número de Twillio', 'en': 'Twillio number' }
          }
        ]
      }
    ]
  }

  addChannel() {
    let dialog = this.matDialog.open(CaDeploymentChannelsModalComponent, {
      width: '500px',
      data: {
        message: '',
        channels: this.channels
      }
    });

    dialog.afterClosed().subscribe(result => {
      if (result) {
        this.agentChannels.push({ ...result });
        this.setStep(this.agentChannels.length - 1);
      }
    });
  }

  setStep(step) {
    this.step = step;
  }

}
