/*
 * Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
import { ScrollIntoViewService } from '../../shared/scroll-into-view.service';

@Component({
  selector: 'bci-dropdown-demo',
  templateUrl: 'dropdown-demo.html',
  styleUrls: ['dropdown-demo.scss'],
})
export class DropdownDemoComponent {
  inputWidth = '300px';
  notificationTypesRequired = false;
  pokemonRequired = false;
  notificationTypesDisabled = false;
  pokemonDisabled = false;
  currentOption: string;
  currentOptionCustomWidth: string;
  currentNotificationType: string;
  currentPokemon: string[];
  currentPokemonDisabled: string[] = ['Disabled'];
  currentPokemonFromGroup: string;
  currentPokemonFromGroupMultiple: string[];
  currentPokemonFromGroupDisabled: string[] = ['Disabled Option'];
  currentDigimon: string;
  digimonRequired = false;
  latestChangeEvent: MatSelectChange;
  floatPlaceholder = 'auto';
  selectFormControl = new FormControl('', [Validators.required,Validators.pattern(/^(?!warning$|error$).*/)]);
  foodControl = new FormControl('pizza-1');
  pokemonTheme = 'primary';

  constructor(public scrollIntoViewService: ScrollIntoViewService) { }  

  get isWarning() {
    return this.selectFormControl.value?.length > 0 && this.selectFormControl.value == 'warning';
  }

  get isError() {
    return this.selectFormControl.value?.length > 0 && this.selectFormControl.value == 'error';
  }

  foods = [
    { value: null, viewValue: 'None' },
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' },
  ];

  notificationTypes = [
    { value: 'info', viewValue: 'Information Type' },
    { value: 'warning', viewValue: 'Warning Type' },
    { value: 'error', viewValue: 'Error Type' },
    { value: 'success', viewValue: 'Success Type' },
  ];

  pokemon = [
    { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
    { value: 'charizard-1', viewValue: 'Charizard' },
    { value: 'squirtle-2', viewValue: 'Squirtle' },
    { value: 'pikachu-3', viewValue: 'Pikachu' },
    { value: 'eevee-4', viewValue: 'Eevee' },
    { value: 'ditto-5', viewValue: 'Ditto' },
    { value: 'psyduck-6', viewValue: 'Psyduck' },
  ];

  pokemonGroups = [
    {
      name: 'Grass',
      pokemon: [
        { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
        { value: 'oddish-1', viewValue: 'Oddish' },
        { value: 'bellsprout-2', viewValue: 'Bellsprout' },
      ],
    },
    {
      name: 'Water',
      pokemon: [
        { value: 'squirtle-3', viewValue: 'Squirtle' },
        { value: 'psyduck-4', viewValue: 'Psyduck' },
        { value: 'horsea-5', viewValue: 'Horsea' },
      ],
    },
    {
      name: 'Fire',
      disabled: true,
      pokemon: [
        { value: 'charmander-6', viewValue: 'Charmander' },
        { value: 'vulpix-7', viewValue: 'Vulpix' },
        { value: 'flareon-8', viewValue: 'Flareon' },
      ],
    },
    {
      name: 'Psychic',
      pokemon: [
        { value: 'mew-9', viewValue: 'Mew' },
        { value: 'mewtwo-10', viewValue: 'Mewtwo' },
      ],
    },
  ];

  digimon = [
    { value: 'mihiramon-0', viewValue: 'Mihiramon' },
    { value: 'sandiramon-1', viewValue: 'Sandiramon' },
    { value: 'sinduramon-2', viewValue: 'Sinduramon' },
    { value: 'pajiramon-3', viewValue: 'Pajiramon' },
    { value: 'vajiramon-4', viewValue: 'Vajiramon' },
    { value: 'indramon-5', viewValue: 'Indramon' },
  ];

  switchRequiredNotificationType() {
    this.notificationTypesRequired = !this.notificationTypesRequired;
  }

  switchDisableNotificationType() {
    this.notificationTypesDisabled = !this.notificationTypesDisabled;
  }

  capitalizeFirstLetterOfNotificationType(): string {
    return this.selectFormControl.value.charAt(0).toUpperCase() + this.selectFormControl.value.slice(1);
  }

  switchRequiredPokemon() {
    this.pokemonRequired = !this.pokemonRequired;
  }

  switchPokemonDisabled() {
    this.pokemonDisabled = !this.pokemonDisabled;
  }

  switchDigimonRequired() {
    this.digimonRequired = !this.digimonRequired;
  }

  toggleDisabled() {
    this.foodControl.enabled ? this.foodControl.disable() : this.foodControl.enable();
  }

  setPokemonValue() {
    this.currentPokemon = ['eevee-4', 'psyduck-6'];
  }
}
