import {
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Input,
  Output,
  ViewChild,
  inject,
} from '@angular/core'
import { MatDialog, MatDialogModule } from '@angular/material/dialog'
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'

type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'

@Component({
  selector: 'gn-ui-action-menu',
  templateUrl: './action-menu.component.html',
  styleUrls: ['./action-menu.component.css'],
  standalone: true,
  imports: [
    ButtonComponent,
    MatMenuModule,
    MatDialogModule,
    TranslateDirective,
    TranslatePipe,
  ],
})
export class ActionMenuComponent {
  dialog = inject(MatDialog)
  private cdr = inject(ChangeDetectorRef)

  @Input() canDuplicate = true
  @Input() isDuplicating: boolean
  @Input() canDelete = true
  @Input() page: 'draft' | 'main' | 'record'
  @Output() duplicate = new EventEmitter<void>()
  @Output() delete = new EventEmitter<void>()
  @Output() closeActionMenu = new EventEmitter<void>()
  @Output() rollback = new EventEmitter<void>()
  @Output() switch = new EventEmitter<void>()

  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger

  sectionDisplayed: ActionMenuPage = 'mainMenu'

  displayMainMenu() {
    this.sectionDisplayed = 'mainMenu'
    this.cdr.markForCheck()
  }

  displayDeleteMenu() {
    switch (this.page) {
      case 'draft':
        this.sectionDisplayed = 'rollbackMenu'
        break
      case 'record':
        this.delete.emit()
        break
      case 'main':
      default:
        this.sectionDisplayed = 'deleteMenu'
    }
    this.cdr.markForCheck()
  }
}
