import { CommonModule } from '@angular/common';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { NgbModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';

// Pipes
import { ThousandToShortFormatPipe } from '../../pipes/thousand-to-short-format-pipe';
import { FormatCurrencyPipe } from '../../pipes/format-currency.pipe';

// Models
import { ProgressDropdownData } from '../ca-truck-trailer-progress-bar/models/progress-dropdown-data.model';

//Components
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';

@Component({
    selector: 'app-ca-truck-trailer-progress-bar',
    templateUrl: './ca-truck-trailer-progress-bar.component.html',
    styleUrls: ['./ca-truck-trailer-progress-bar.component.scss'],
    imports: [
        // Modules
        CommonModule,
        NgbModule,
        //Components
        CaAppTooltipV2Component,
        // Pipes
        ThousandToShortFormatPipe,
        FormatCurrencyPipe,
    ],
    encapsulation: ViewEncapsulation.None
})
export class CaTruckTrailerProgresBarComponent {
  @Input() type: string = '';
  @Input() text: string | number = '';
  @Input() percents!: number;
  @Input() data!: any; // leave this any for now
  @Input() columnField!: string;
  @Input() isTable: boolean = false;
  @Input() daysExpired: boolean = false;
  @Input() daysToPay!: number;
  @Input() hasPopover: boolean = false;
  @Input() pmName: string = 'Add PM Item';

  public progressDropdownActive: number = -1;
  public progressDropdownColumnActive: string | any = ''; // leave this any for now
  public progressDropdownData!: ProgressDropdownData;
  public isOpenPopup: boolean = false;

  public get daysPluralization(): string {
    const text = isNaN(this.text as number) ? this.text : this.text.toString();
    if (text === '1') {
      return 'Day';
    }

    return 'Days';
  }

  // Toggle Progress Dropdown
  public toggleProgressDropdown(tooltip: NgbPopover): void {
    if (this.hasPopover) {
      if (tooltip.isOpen()) {
        tooltip.close();
        this.isOpenPopup = false;
      } else {
        tooltip.open();
        this.isOpenPopup = true;
      }

      this.progressDropdownActive = tooltip.isOpen() ? this.data.textUnit : -1;
      this.progressDropdownColumnActive = tooltip.isOpen()
        ? this.columnField
        : null;
      this.progressDropdownData = {
        row: this.data,
        column: this.data[this.columnField],
      };
    } else {
      return;
    }
  }
}