import {
  Component,
  ElementRef,
  EventEmitter,
  HostListener,
  Input,
  OnInit,
  Output,
  ViewChild,
} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatTooltipDefaultOptions, MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
import { DeviceDetectorService } from 'ngx-device-detector';
import { AppStorage } from 'src/app/shared/app-storage';
import { ReactionDialogComponent } from 'src/app/shared/dialogs/reaction-dialog/reaction-dialog.component';
import { ResizedEvent } from 'src/app/shared/directives/resized.directive';
import { AccountService } from 'src/app/shared/server-services/account.service';
import {
  ReactionEnum,
  reactionIndexSrcMap,
} from 'src/app/shared/server-services/query-records/room-records';
import { ChatData, ChatPermissions } from '../chat-data';

const customToolTipOptions: MatTooltipDefaultOptions = {
  showDelay: 200,
  hideDelay: 0,
  // touchGestures: 'auto',
  // position: 'before',
  touchendHideDelay: 0,
  disableTooltipInteractivity: true,
};

export type ChatMessageContextMenuData = {
  event: MouseEvent;
  data: ChatData;
};

@Component({
  selector: 'app-chat-message',
  templateUrl: './chat-message.component.html',
  styleUrls: ['./chat-message.component.scss'],
  providers: [{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: customToolTipOptions }],
})
export class ChatMessageComponent implements OnInit {
  @Input() data: ChatData;
  @Input() runSeenAnimation: boolean = false;
  @Output() readonly addReactionEvent: EventEmitter<ReactionEnum> =
    new EventEmitter<ReactionEnum>();
  @Output() readonly resizedEvent: EventEmitter<void> = new EventEmitter<void>();
  @Output() readonly contextmenuevent: EventEmitter<ChatMessageContextMenuData> =
    new EventEmitter<ChatMessageContextMenuData>();

  isCompactDisplay = AppStorage.getItem('messageDisplay') === 'compact';

  public isOnDesktop: boolean = false;
  public isTrustVerified: boolean = false;
  public isTrustDangerous: boolean = false;
  public reactionSrcMap = reactionIndexSrcMap;

  constructor(private deviceDetectorService: DeviceDetectorService, private dialog: MatDialog) {
    // calculate if the message is editable

    this.isCompactDisplay = AppStorage.getItem('messageDisplay') === 'compact';
    this.isOnDesktop = this.deviceDetectorService.isDesktop();
  }

  ngOnInit(): void {
    this.isCompactDisplay = AppStorage.getItem('messageDisplay') === 'compact';
  }

  public handleContextMenu = (event: MouseEvent) => {
    event.preventDefault();
    this.contextmenuevent.emit({ event: event, data: this.data });
  };

  public handleLongPress = () => {
    this.contextmenuevent.emit({ event: null, data: this.data });
  };

  public onResized(event: ResizedEvent) {
    this.resizedEvent.emit();
  }

  // public addReaction(reaction: ReactionEnum | null) {
  //   this.addReactionEvent.emit(reaction);
  //   setTimeout(() => {
  //     this.hideReactionDialog();
  //   }, 100);
  // }

  public openReactionDialog = () => {
    if (!Object.keys(this.data.messageRef.reactions ?? {}).length) {
      return;
    }
    let dialogRef = this.dialog.open(ReactionDialogComponent, {
      data: {
        reactions: this.data.messageRef.reactions,
      },
      hasBackdrop: true,
      disableClose: false,

      width: '90%',
      minWidth: '320px',
      maxWidth: '400px',
      height: '80%',
      minHeight: '500px',
    });
  };

  // public expandReactionDialog(event) {
  //   this.isReactionBoxExpanded = event;
  // }

  // public hideReactionDialog() {
  //   this.showReactions = false;
  //   this.isReactionBoxExpanded = false;
  // }
}
