import { Component, Output, EventEmitter, Input } from '@angular/core';
import {
  ReactionEnum,
  reactionList,
} from 'src/app/shared/server-services/query-records/room-records';

@Component({
  selector: 'app-select-reaction',
  templateUrl: './select-reaction.component.html',
  styleUrls: ['./select-reaction.component.scss'],
})
export class SelectReactionComponent {
  public reactions = reactionList;
  public topReactions = [
    reactionList[0], // ❤️
    reactionList[39], // 😆
    reactionList[41], // 😮
    reactionList[17], // 😢
    reactionList[40], // 😠
    reactionList[5], // 👍
  ];

  // for lazyload, it is a gray rectangle
  public isExpanded: boolean = false;

  @Output('expand') readonly expandEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output('select') readonly selectEvent: EventEmitter<ReactionEnum> =
    new EventEmitter<ReactionEnum>();
  @Input('used') used: ReactionEnum | null;

  constructor() {}

  public expand() {
    this.isExpanded = true;
    this.expandEvent.emit(true);
  }

  public select(emoji: ReactionEnum) {
    this.selectEvent.emit(emoji == this.used ? null : emoji);
  }
}
