/*
 * Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */
import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { AlertBoxOptions, AlertService, AlertType, BciAlertDialogIntl, PrimaryButton } from '@bci-web-core/core';
import { CustomBciAlertDialogIntl } from './custom-bci-alert-dialog-intl';

const SIZES_WITHOUT_ADDITIONAL_TITLE: {viewport: string, minWidth: string, maxWidth: string, minHeight: string, maxHeight: string}[] = [
  {viewport: 'VP1', minWidth: 'full', maxWidth: 'full', minHeight: 'full', maxHeight: 'full'},
  {viewport: 'VP2', minWidth: '480px', maxWidth: '640px', minHeight: '158px', maxHeight: ' 90%'},
  {viewport: 'VP3', minWidth: '640px', maxWidth: '640px', minHeight: '162px', maxHeight: '90%'}
];

const SIZES_WITH_ADDITIONAL_TITLE: {viewport: string, minWidth: string, maxWidth: string, minHeight: string, maxHeight: string}[] = [
  {viewport: 'VP1', minWidth: 'full', maxWidth: 'full', minHeight: 'full', maxHeight: 'full'},
  {viewport: 'VP2', minWidth: '480px', maxWidth: '640px', minHeight: '207px', maxHeight: ' 90%'},
  {viewport: 'VP3', minWidth: '640px', maxWidth: '640px', minHeight: '211px', maxHeight: '90%'}
];
@Component({
  selector: 'bci-alert-modal-demo',
  templateUrl: './alert-modal-demo.component.html',
  styleUrls: ['./alert-modal-demo.component.scss'],
  providers: [{ provide: BciAlertDialogIntl, useClass: CustomBciAlertDialogIntl }],
})
export class AlertModalDemoComponent implements OnInit {
  title:string;
  additionalTitle = 'Additional title';
  description:string;
  infoText:string;
  alertType = AlertType;
  selectedAlertType: AlertType = AlertType.Info;
  primaryButton = PrimaryButton;
  selectedPrimaryButton: PrimaryButton;
  leftBtnTitle:string;
  rightBtnTitle:string;
  outerLeftBtnTitle:string;
  disableOuterLeftBtn:boolean;
  disableLeftBtn:boolean;
  disableRightBtn:boolean;
  hiddenCloseIcon:boolean;
  modalResponse: string;

  widthFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern("^[0-9][0-9]*(px|%|vw)$"),
  ]);

  selectedOptionValue = 'standard';
  templateOptions = [
    {
      value: 'standard',
      label: 'Standard',
    },
    {
      value: 'long_title',
      label: 'Long Title',
    },
    {
      value: 'long_additional_title',
      label: 'Long additional Title',
    },
    {
      value: 'big_content',
      label: 'Big content',
    },
    {
      value: 'all_together',
      label: 'All together',
    },
    {
      value: 'custom',
      label: 'Custom',
    },
  ];
  displayedColumns: string[] = ['viewport', 'minWidth','maxWidth', 'minHeight', 'maxHeight'];
  dataSource1 = SIZES_WITHOUT_ADDITIONAL_TITLE;
  dataSource2 = SIZES_WITH_ADDITIONAL_TITLE;

  constructor(private alertService: AlertService, private viewContainerRef: ViewContainerRef) {
    if(this.widthFormControl.invalid){
      this.widthFormControl.markAsTouched();
    }
  }

  ngOnInit() {
    this.changeForm('standard');
  }

  changeToCustomOption():void{
    this.selectedOptionValue = 'standard';
  }

  openAlertModal(): void {
    this.modalResponse = null;
    const alertBoxOptions: AlertBoxOptions = {
      title: this.title,
      additionalTitle: this.additionalTitle,
      description: this.description,
      infoText: this.infoText,
      type: this.selectedAlertType,
      primaryButton: this.selectedPrimaryButton,
      leftButtonTitle: this.leftBtnTitle,
      rightButtonTitle: this.rightBtnTitle,
      outerLeftButtonTitle: this.outerLeftBtnTitle,
      outerLeftButtonDisabled: this.disableOuterLeftBtn,
      leftButtonDisabled: this.disableLeftBtn,
      rightButtonDisabled: this.disableRightBtn,
      closeIconHidden: this.hiddenCloseIcon,
    };
    const ref = this.alertService.openAlertBox(alertBoxOptions, this.viewContainerRef);
    ref.afterClosed().subscribe((res) => {
      this.modalResponse = res;
    });
  }

    // update the inputs regarding the tab
  changeForm(selectedOptionalValue){
    switch(selectedOptionalValue) { 
      case 'standard': { 
          this.setStandardConfig();
          break; 
      } 
      case 'long_title': { 
          this.setLongTitleConfig();
          break; 
      } 
      case 'long_additional_title': { 
        this.setLongAdditionalTitleConfig();
        break; 
      } 
      case 'big_content': { 
        this.setBigContentConfig();
        break; 
      } 
      case 'all_together': { 
        this.setAllTogetherConfig()
        break; 
      } 
      default: { 
        //In Custom the User set the properties
        break; 
      } 
    } 
  }

  // Default/Standard configuration of the inputs
  setStandardConfig(){
    this.title = 'Lorem ipsum dolor sit';
    this.additionalTitle = '';
    this.description = "Vivamus urna arcu, blandit ac nunc vitae, efficitur volutpat erat. Nam venenatis ante diam, sollicitudin cursus lorem blandit eu. Quisque dapibus tristique arcu in euismod. Etiam est purus, commodo sit amet lacus nec, porta viverra arcu. Etiam in finibus ligula. Ut vitae luctus magna. Maecenas fringilla vel velit eu accumsan.";
    this.infoText = "Interdum et malesuada fames" ;
    this.selectedAlertType = AlertType.Info;
    this.selectedPrimaryButton = PrimaryButton.LeftButton;
    this.leftBtnTitle = 'Confirm';
    this.rightBtnTitle = 'Cancel';
    this.outerLeftBtnTitle = 'Optional';
    this.disableOuterLeftBtn = true;
    this.disableLeftBtn = false;
    this.disableRightBtn = false;
    this.hiddenCloseIcon = false;
  }
  // Configuration with a long title
  setLongTitleConfig(){
    this.title = 'Morbi laoreet mollis enim, et elementum augue sagittis ac. Nullam eleifend nisl a lacus egestas, at ultrices dolor maximus. Integer accumsan faucibus congue. Duis dignissim';
    this.additionalTitle = '';
    this.description = "Aenean maximus turpis elit, non malesuada nunc dignissim quis. Curabitur maximus elit in finibus interdum. Suspendisse aliquam urna non velit consectetur fermentum. Donec vel varius nunc, vel sagittis elit. Donec sed leo nec mauris tristique vulputate. Vestibulum varius enim purus, sed elementum lectus condimentum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis sem in justo gravida commodo. Proin dapibus volutpat fringilla.";
    this.infoText = "Morbi convallis, ligula ut" ;
    this.selectedAlertType = AlertType.Warning;
    this.selectedPrimaryButton = PrimaryButton.LeftButton;
    this.leftBtnTitle = 'Confirm';
    this.rightBtnTitle = 'Cancel';
    this.outerLeftBtnTitle = 'Optional';
    this.disableOuterLeftBtn = true;
    this.disableLeftBtn = false;
    this.disableRightBtn = false;
    this.hiddenCloseIcon = false;
  }
  // Configuration with an additional long title
  setLongAdditionalTitleConfig(){
    this.title = 'In suscipit, massa eget';
    this.additionalTitle = 'Phasellus bibendum, leo ac pellentesque scelerisque, massa mi aliquet ipsum, eu faucibus magna dolor ut eros. Nunc posuere euismod sapien ultricies tincidunt. Ut eu semper velit. In finibus nibh sit amet leo vehicula convallis. Nulla.';
    this.description = "Maecenas tempor placerat mollis. Cras porta condimentum enim. Integer iaculis elit ac ligula fringilla, et mollis mauris blandit. Aenean accumsan porttitor nulla, quis luctus lectus efficitur ac. Etiam ex massa, mattis nec libero a, elementum commodo enim. Nam ipsum mi, pretium aliquam iaculis nec, scelerisque quis neque. Suspendisse vitae egestas lacus, vel finibus neque. Suspendisse potenti.";
    this.infoText = "Praesent tortor metus." ;
    this.selectedAlertType = AlertType.None;
    this.selectedPrimaryButton = PrimaryButton.LeftButton;
    this.leftBtnTitle = 'Confirm';
    this.rightBtnTitle = 'Cancel';
    this.outerLeftBtnTitle = 'Optional';
    this.disableOuterLeftBtn = true;
    this.disableLeftBtn = false;
    this.disableRightBtn = false;
    this.hiddenCloseIcon = false;
  }
  // Configuration with a big content
  setBigContentConfig(){
    this.title = 'Mauris at sodales tortor, sit.';
    this.additionalTitle = '';
    this.description = "Aenean sit amet gravida sem, a congue est. Nunc sagittis, sem ut varius cursus, odio metus malesuada nisl, condimentum elementum mauris tellus id ante. Etiam facilisis dolor vitae diam bibendum, ac fermentum mi semper. Morbi porta, lacus at tincidunt imperdiet, risus leo maximus urna, vitae iaculis risus ex sit amet lectus. Morbi nibh nisi, bibendum eget fringilla a, consectetur sed quam. Sed quis massa ut quam porta pharetra quis in mauris. Donec eros justo, euismod quis finibus ultrices, aliquet nec mi. Pellentesque neque lorem, lacinia sit amet lobortis vel, convallis sit amet turpis. Integer porttitor dictum metus porta finibus. Mauris sit amet ultricies felis. Ut tincidunt vel metus id imperdiet. Aliquam tincidunt eu mi ac consectetur. Nulla non elit velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan mauris placerat dapibus ultrices. Nullam bibendum tristique eros vitae tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at mi interdum, tempor turpis ut, malesuada ipsum. Vivamus in diam ut nulla pulvinar iaculis in ac velit. Nulla eu mauris sit amet diam pretium ornare eget nec nisi. Ut nec malesuada diam. Cras a consectetur odio. Sed vitae odio vel nulla suscipit pellentesque. Vivamus varius commodo velit et tempus. Pellentesque venenatis, tellus sit amet hendrerit condimentum, elit libero ultricies eros, ut bibendum ligula mauris in sem. Cras rutrum orci sapien, tincidunt aliquam neque fringilla ac. Fusce molestie metus lectus, eget vestibulum purus fringilla vitae. Donec at nibh pharetra, ornare mauris ac, commodo augue. Etiam non dapibus lectus, eu lacinia odio. Vivamus urna arcu, blandit ac nunc vitae, efficitur volutpat erat. Nam venenatis ante diam, sollicitudin cursus lorem blandit eu. Quisque dapibus tristique arcu in euismod. Etiam est purus, commodo sit amet lacus nec, porta viverra arcu. Etiam in finibus ligula. Ut vitae luctus magna. Maecenas fringilla vel velit eu accumsan. Phasellus bibendum, leo ac pellentesque scelerisque, massa mi aliquet ipsum, eu faucibus magna dolor ut eros. Nunc posuere euismod sapien ultricies tincidunt. Ut eu semper velit. In finibus nibh sit amet leo vehicula convallis. Nulla. Vivamus urna arcu, blandit ac nunc vitae, efficitur volutpat erat. Nam venenatis ante diam, sollicitudin cursus lorem blandit eu. Quisque dapibus tristique arcu in euismod. Etiam est purus, commodo sit amet lacus nec, porta viverra arcu. Etiam in finibus ligula. Ut vitae luctus magna. Maecenas fringilla vel velit eu accumsan.";
    this.infoText = "Nam semper mauris vitae leo." ;
    this.selectedAlertType = AlertType.Success;
    this.selectedPrimaryButton = PrimaryButton.LeftButton;
    this.leftBtnTitle = 'Confirm';
    this.rightBtnTitle = 'Cancel';
    this.outerLeftBtnTitle = 'Optional';
    this.disableOuterLeftBtn = true;
    this.disableLeftBtn = false;
    this.disableRightBtn = false;
    this.hiddenCloseIcon = false;
  }
  // Configuration with all configs together
  setAllTogetherConfig(){
    this.title = 'Phasellus ut iaculis lacus. Phasellus pulvinar bibendum efficitur. Nulla dictum est nibh, sed gravida magna pretium sit amet. Vivamus imperdiet felis id turpis viverra luctus.';
    this.additionalTitle =  '';
    this.description = "Phasellus malesuada iaculis eros ut tincidunt. Aenean in consectetur mi. Vivamus nec nunc nisl. Aliquam erat eros, tempus non cursus at, vulputate in lorem. Quisque quis lorem eu dolor vestibulum sollicitudin. Suspendisse ligula urna, faucibus in luctus sit amet, lobortis sit amet turpis. Quisque blandit nisi eu mauris ultrices accumsan. Ut tempus felis mauris, a maximus ipsum molestie id. Donec feugiat, ante eget porttitor pulvinar, nunc mi bibendum orci, vitae interdum mauris elit nec justo. Ut feugiat at libero in mollis. Nam non lectus sed augue fringilla sodales. Vivamus non dui sed turpis efficitur viverra a et enim. Maecenas eget enim eget turpis fringilla sagittis. Sed vel hendrerit felis, in iaculis arcu. Morbi porttitor aliquam ultrices. Vivamus et ultrices lorem, at suscipit leo. Aliquam pellentesque luctus tempus. Nam congue erat et mauris lacinia, sed porttitor ligula consequat. Cras ut accumsan risus. Praesent et vestibulum odio. Quisque rhoncus consectetur sodales. Duis malesuada ante sed tempus fringilla. Proin sit amet eros vestibulum, tempor leo ac, imperdiet sapien. Aenean sit amet gravida sem, a congue est.  Nulla eu mauris sit amet diam pretium ornare eget nec nisi. Ut nec malesuada diam. Cras a consectetur odio. Sed vitae odio vel nulla suscipit pellentesque. Vivamus varius commodo velit et tempus. Pellentesque venenatis, tellus sit amet hendrerit condimentum, elit libero ultricies eros, ut bibendum ligula mauris in sem. Cras rutrum orci sapien, tincidunt aliquam neque fringilla ac. Fusce molestie metus lectus, eget vestibulum purus fringilla vitae. Donec at nibh pharetra, ornare mauris ac, commodo augue. Etiam non dapibus lectus, eu lacinia odio. Vivamus urna arcu, blandit ac nunc vitae, efficitur volutpat erat. Nam venenatis ante diam, sollicitudin cursus lorem blandit eu. Quisque dapibus tristique arcu in euismod. Etiam est purus, commodo sit amet lacus nec, porta viverra arcu. Etiam in finibus ligula. Ut vitae luctus magna. Maecenas fringilla vel velit eu accumsan. Vivamus urna arcu, blandit ac nunc vitae, efficitur volutpat erat. Nam venenatis ante diam, sollicitudin cursus lorem blandit eu. Quisque dapibus tristique arcu in euismod. Etiam est purus, commodo sit amet lacus nec, porta viverra arcu. Etiam in finibus ligula. Ut vitae luctus magna. Maecenas fringilla vel velit eu accumsan.";
    this.infoText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim rutrum erat. In et risus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget nibh eget nisi euismod." ;
    this.selectedAlertType = AlertType.Info;
    this.selectedPrimaryButton = PrimaryButton.LeftButton;
    this.leftBtnTitle = 'Confirm';
    this.rightBtnTitle = 'Cancel';
    this.outerLeftBtnTitle = 'Optional';
    this.disableOuterLeftBtn = true;
    this.disableLeftBtn = false;
    this.disableRightBtn = false;
    this.hiddenCloseIcon = false;
  }
}
