import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ContentChild,
  TemplateRef
} from '@angular/core';

import { ucapAnimations } from '@ucap-webmessenger/ui';

import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
import { MatAccordion } from '@angular/material';
import { ExpansionPanelItemDirective } from '../directives/expansion-panel-item.directive';

@Component({
  selector: 'ucap-group-expansion-panel',
  templateUrl: './expansion-panel.component.html',
  styleUrls: ['./expansion-panel.component.scss'],
  animations: ucapAnimations
})
export class ExpansionPanelComponent implements OnInit {
  @Input()
  groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] }[];

  @Input()
  favoritBuddyList: UserInfo[];

  @Output()
  more = new EventEmitter<{
    event: MouseEvent;
    group: GroupDetailData;
  }>();

  @ContentChild(ExpansionPanelItemDirective, {
    read: TemplateRef,
    static: true
  })
  expansionPanelItemTemplateRef: TemplateRef<ExpansionPanelItemDirective>;

  @ViewChild('groupAccordion', { static: true }) groupAccordion: MatAccordion;

  constructor() {}

  ngOnInit() {}

  expandMore() {
    this.groupAccordion.openAll();
  }

  expandLess() {
    this.groupAccordion.closeAll();
  }

  onClickMore(event: MouseEvent, group: GroupDetailData) {
    this.more.emit({ event, group });
  }
}