import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { trigger, style,transition, animate, keyframes, query, stagger, group, state, animateChild } from '@angular/animations';
// import { trigger, state, transition, animate, style } from '@angular/animations';
import { UsecaselistService } from '../usecaselist.service'
import { environment } from '../../../../../../environments/environment.dev';

@Component({
  selector: 'app-usecase-detail',
  templateUrl: './usecase-detail.component.html',
  styleUrls: ['./usecase-detail.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': '2500px', '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': '2500px'
        })),
        animate('800ms ease-in-out', style({
            'opacity': '1'
        }))
    ]
    )])
]),
]
})

export class UsecaseDetailComponent implements OnInit {
  @Input() ucDescp;
  @Input() role;
  @Input() useCase;
  @Input() selected;
  @Output() ucdetailEvent = new EventEmitter<any>();
  @Output() ucdeleteEvent = new EventEmitter();
  @Output() ucSelectEvent = new EventEmitter<any>();
  details: any
  othIcons : boolean = false;
  uctoEdit: any;
  isRow :any
  text: any;
  animationState = 'in';
  maxLength: number;
  trimmedString: string;
  readText: string;
  eventMstrId: number;
  singleSelectQuestions: any;
  multipleSelectQuestions: any;
  customQuestions: any;
  img_path = environment.imageUrl+'/assets/img/admin/';
  img_path_ot = environment.imageUrl;
  //state: string = "less";
  constructor(private recucforEdit: UsecaselistService) { }

  ngOnInit() {
    this.details =  this.ucDescp;
    //  console.log(JSON.stringify(this.details));
      this.recucforEdit.getQueAndAns(this.details.id).subscribe(resp => {
        // console.log(resp);
        this.singleSelectQuestions = resp.singleSelectQuestions;
        this.multipleSelectQuestions = resp.multipleSelectQuestions;
        this.customQuestions = resp.customQuestions;
      })
    // 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(" ")));
      }
    }
  }
  showOtherIcons(id){
    this.othIcons = true;
    // console.log("menu icon clicked --- "+id);
  }
  editUsecase(id, ucDetail){
    this.ucdetailEvent.emit(ucDetail);
  }

  mouseOvers() {
    if(this.role) {
      this.isRow = this.selected
    }

}
  mouseLeave() {
    if(this.role) {
      this.isRow = this.selected + 0.5
    }
}

  selectedUseCase (uc,ucId) {
    console.log(uc,'usecasessss')
    this.ucSelectEvent.emit({useCase: uc, index: this.selected, useCaseId: ucId});
  }

  deleteUsecase(id, data){
    console.log(JSON.stringify(data));
    this.ucdeleteEvent.emit(data);
  }
}
