
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { trigger, style, transition, animate, keyframes, query, stagger, group, state, animateChild } from '@angular/animations';
import { environment } from '../../../../../../environments/environment.dev';
@Component({
  selector: 'app-bny-usecase',
  templateUrl: './bny-usecase.component.html',
  styleUrls: ['./bny-usecase.component.scss'],
  animations: [
    //   trigger('viewInfo',[
    //     state('more', style({
    //       height: '100%',
    //     })),
    //     state('less', style({
    //       height: '250px',
    //     })),
    //     transition('less <=> more', animate('300ms ease-in')),
    // ]),
    trigger('slideInOut', [
      state('in', style({
        'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
      })),
      state('out', style({
        'max-height': '100%', 'opacity': '1', 'visibility': 'visible'
      })),
      transition('in => out', [group([
        animate('400ms ease-in-out', style({
          'opacity': '1'
        })),
        animate('600ms ease-in-out', style({
          'max-height': '100%'
        })),
        animate('700ms ease-in-out', style({
          'visibility': 'visible'
        }))
      ]
      )]),
      transition('out => in', [group([
        animate('1ms ease-in-out', style({
          'visibility': 'visible'
        })),
        animate('600ms ease-in-out', style({
          'max-height': '500px'
        })),
        animate('800ms ease-in-out', style({
          'opacity': '1'
        }))
      ]
      )])
    ]),
  ]
})
export class BNYUsecaseComponent implements OnInit {
  @Input() ucDescp;
  @Input() useCase;
  @Input() bgColor;
  // details: any
  othIcons = false;
  uctoEdit: any;
  isRow: any;
  text: any;
  animationState = 'in';
  maxLength: number;
  trimmedString: string;
  readText: string;
  eventMstrId: number;
  details = {
    id : 73,
    skillTrackMstrId : 1,
    eventMstrId : 2,
    usecaseDescription: '<P>DEVELOP A WEB API WHICH IS/CAN BE EASILY HOSTED ON A DOCKER IMAGE THAT DOES THE FOLLOWING STEPS:</P>',
    usecaseTitle : 'USER AUTHENTICATION SYSTEM'
  };

  detailDescCard = 'detailDescCard'
  imageUrl: string = environment.imageUrl;
  // state: string = "less";
  constructor() { }

  ngOnInit() {
    if (this.bgColor) { this.detailDescCard = 'bgColor detailDescCard' }
    this.details = this.useCase;
    // this.recucforEdit.currentUC.subscribe(uctoEdit => this.uctoEdit = uctoEdit)
    this.text = this.details.usecaseDescription;
    this.readText = 'More';
    this.maxLength = 500;
    this.trimmedString = this.text.substr(0, this.maxLength);
    this.trimmedString = this.trimmedString.substr(0, Math.min(this.trimmedString.length, this.trimmedString.lastIndexOf(' ')));

    // if(this.text[].eventMstrId == 3){
    // }
  }
  // animateMe(){
  //   this.state =  (this.state === 'less' ? 'more' : 'less');
  // }
  toggleShowDiv(divName: string) {
    if (divName === 'e') {
      // console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      if (this.animationState === 'out') {
        this.readText = 'Less';
        this.trimmedString = this.text;
      }
      if (this.animationState === 'in') {
        this.readText = 'More';
        this.maxLength = 200;
        this.trimmedString = this.text.substr(0, this.maxLength);
        this.trimmedString = this.trimmedString.substr(0, Math.min(this.trimmedString.length, this.trimmedString.lastIndexOf(' ')));
      }
    }
  }



}
