import { Component, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
  standalone: true,
  imports: [CommonModule, FormsModule],
})
export class SidebarComponent {
  @Output() ticketingClick = new EventEmitter<void>();
  @Output() withdrawClick = new EventEmitter<void>();
  @Output() depositClick = new EventEmitter<void>();
  @Output() payoutClick = new EventEmitter<void>();
  @Output() cancelClick = new EventEmitter<void>();

  showCancel: boolean = false;
  ticketNo: string = '';

  showPayout: boolean = false;
  payoutTicketNo: string = '';

  showDeposit: boolean = false;
  depositOperatorId = '';
  depositShroffId = '';
  depositAmount = '';

  showWithdraw: boolean = false;
  withdrawOperatorId = '';
  withdrawShroffId = '';
  withdrawAmount = '';

  // Modal handlers...
  openCancelPopup() {
    this.cancelClick.emit();
    this.showCancel = true;
  }

  closeCancelPopup() {
    this.showCancel = false;
    this.ticketNo = '';
  }

  printTicket() {
    alert(`Printing Ticket No: ${this.ticketNo}`);
    this.closeCancelPopup();
  }

  openPayoutPopup() {
    this.payoutClick.emit();
    this.showPayout = true;
  }

  closePayoutPopup() {
    this.showPayout = false;
    this.payoutTicketNo = '';
  }

  erasePayoutTicket() {
    this.payoutTicketNo = '';
  }

  printPayoutTicket() {
    alert(`Printing Payout Ticket No: ${this.payoutTicketNo}`);
    this.closePayoutPopup();
  }

  openDepositPopup() {
    this.depositClick.emit();
    this.showDeposit = true;
  }

  closeDepositPopup() {
    this.showDeposit = false;
    this.depositOperatorId = '';
    this.depositShroffId = '';
    this.depositAmount = '';
  }

  printDeposit() {
    alert(`Deposit: ₹${this.depositAmount}`);
    this.closeDepositPopup();
  }

  openWithdrawPopup() {
    this.withdrawClick.emit();
    this.showWithdraw = true;
  }

  closeWithdrawPopup() {
    this.showWithdraw = false;
    this.withdrawOperatorId = '';
    this.withdrawShroffId = '';
    this.withdrawAmount = '';
  }

  printWithdraw() {
    alert(`Withdraw: ₹${this.withdrawAmount}`);
    this.closeWithdrawPopup();
  }

  onNumpadClick(value: string, type: 'deposit' | 'withdraw') {
    if (type === 'deposit') {
      this.depositAmount += value;
    } else if (type === 'withdraw') {
      this.withdrawAmount += value;
    }
  }

  onBackspace(type: 'deposit' | 'withdraw') {
    if (type === 'deposit') {
      this.depositAmount = this.depositAmount.slice(0, -1);
    } else if (type === 'withdraw') {
      this.withdrawAmount = this.withdrawAmount.slice(0, -1);
    }
  }
}
