// Angular Core
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';

// Interfaces
import { ColumnConfig, TopPurchasedProducts } from 'src/app/interfaces/common-interfaces';
import { DataTransmitterService } from 'src/app/services/dataTransmitter/data-transmitter.service';

// Third Party
import { UtilitiesService } from 'src/app/services/utilities/utilities.service';

@Component({
  standalone: false,
  selector: 'app-suggestive-section',
  templateUrl: './suggestive-section.component.html',
  styleUrls: ['./suggestive-section.component.scss', './suggestive-section.component.query.scss']
})
export class SuggestiveSectionComponent implements OnInit, OnChanges {

  @Input() data!: TopPurchasedProducts['data'];
  @Input() config!: TopPurchasedProducts['config'];
  @Input() isempty!: boolean;
  @Input() shippingInfo!: any;
  @Input() fromPage!: string;
  @Input() isloading!: boolean;
  @Input() hasDispensingData!: boolean;
  @Input() isFromDispensing?: boolean;
  @Input() homeTab!: string;

  allData!: TopPurchasedProducts['data'];
  utilities: UtilitiesService;
  columnConfig: Array<ColumnConfig> = [];

    /*
  * Default config for suggestive
  * Used if no config object is passed
  * @type Object
  */
    defaultConfig = {
        minimumRows: 5,
        maximumRows: 25,
        title: '',
        btnText: 'SHOW MORE RESULTS'
      };
    
      /*
      * Default config for result-set
      * Passed from the suggestive template
      * @type Object
      */
      resultSetConfig = {
        sortable: false,
        filter: false,
        sortBy: false,
        limit: 5,
        naMsg: ' '
      };
    
      enableButton: boolean = true;

  constructor(utilities: UtilitiesService, private dataTransmitter: DataTransmitterService) { this.utilities = utilities; this.dataTransmitter = dataTransmitter; }

  ngOnInit(): void {
    this.config.btnText = 'SHOW MORE RESULTS';
    this.config = this.utilities.merge(this.defaultConfig, this.config);
    this.resultSetConfig.limit = this.config.minimumRows;
  }
  
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['isloading'] && changes['isloading'].currentValue === false && this.data.length == 0) {
        this.dataTransmitter.lane4AdData.next({ndc: '', pageName: this.fromPage});
    }
    this.allData = this.data;
    this.allData = this.allData.slice(0, this.resultSetConfig.limit);
    
    // Set columns config when isFromDispensing changes or is available
    if (changes['isFromDispensing'] || this.isFromDispensing !== undefined) {
      this.setColumnsConfig(this.isFromDispensing ?? false);
    }
  }

  /*
  * Toggle Show button in the suggestive
  * @param {null}
  * @returns {null} 
  */
  showMoreClick() {
    this.allData = this.data;
    if( this.resultSetConfig.limit === this.config.minimumRows ) {
        this.resultSetConfig.limit = (this.config.maximumRows as number);
        setTimeout(() => {
          this.config.btnText = 'SHOW LESS RESULTS';
        }, 50);
    } else {
        this.resultSetConfig.limit = this.config.minimumRows;
        setTimeout(() => {
          this.config.btnText = 'SHOW MORE RESULTS';
        }, 50);
    }
    this.allData = this.allData.slice(0, this.resultSetConfig.limit);
  };

  setColumnsConfig(isFromDispensing: boolean = false) {
    // Clear existing column config to avoid duplicates
    this.columnConfig = [];
    
    switch (this.fromPage.toLowerCase()) {
        case 'fastmovers':
            this.columnConfig.push({
                name: 'SPREAD',
                alias: 'SAVINGS'
            });
        break;
        case 'recommendedtab':
            if (isFromDispensing === true) {
                this.columnConfig.push({
                    name: 'SPREAD',
                    alias: 'SAVINGS'
                });
            }
        break;
    }
  }

}