import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { PopoverDirective } from 'ngx-bootstrap/popover';

@Component({
  selector: 'gc-create-payment-popover-button',
  templateUrl: './create-payment-popover-button.component.html',
  styleUrls: ['./create-payment-popover-button.component.scss']
})
export class CreatePaymentPopoverButtonComponent implements OnChanges {
  @Input() buttonText: string;
  @Input() disabled: boolean;
  @Input() isLink: boolean;
  @Input() isEdit: boolean;
  @Input() isUpdatingBudget: boolean;
  @Input() isUpdatingBudgetFromClientToYc: boolean;
  @Input() isYcProcessed: boolean;
  @Input() canMoveFundsText: string;
  /** Emits true if moving funds */
  @Output() onSubmit = new EventEmitter<boolean>();

  isAttestationPopoverView: boolean;
  currentPopover: PopoverDirective;
  showPopoverButton: boolean;

  ngOnChanges () {
    this.setShowPopoverButton();
  }

  setShowPopoverButton () {
    if (this.isEdit) {
      if (this.isUpdatingBudget) {
        this.showPopoverButton = !!this.canMoveFundsText || this.isUpdatingBudgetFromClientToYc;
      } else {
        this.showPopoverButton = false;
      }
    } else {
      this.showPopoverButton = !!this.canMoveFundsText || this.isYcProcessed;
    }
  }

  setIsAttestationPopoverView (popover: PopoverDirective) {
    this.isAttestationPopoverView = !this.canMoveFundsText;
    this.setCurrentPopover(popover);
  }

  setCurrentPopover (popover: PopoverDirective) {
    if (this.currentPopover) {
      this.currentPopover.hide();
    }
    this.currentPopover = popover;

    setTimeout(() => {
      popover.show();
    });
  }

  proceedWithSubmission () {
    // If either of these are true,
    // the only way to proceed is by confirming they want to move funds
    const moveFunds = !!this.canMoveFundsText;
    this.onSubmit.emit(moveFunds);
  }
}