import {
  Component,
  DoCheck,
  Input,
  IterableDiffer,
  IterableDiffers,
  OnInit,
  QueryList,
  TemplateRef,
  ViewChildren,
  ViewContainerRef
} from '@angular/core';
import { IPriceCyclesModel } from '@fleio-api/plugins/domains/model/price-cycle.model';

@Component({
  selector: 'app-price-cycles',
  templateUrl: './price-cycles.component.html',
  styleUrls: ['./price-cycles.component.scss']
})
export class PriceCyclesComponent implements OnInit, DoCheck {
  @Input() priceType: string;
  @Input() transferAddsYears: boolean;
  @Input() priceCycles: IPriceCyclesModel;
  @Input() defaultPriceCycles: IPriceCyclesModel;
  @Input() defaultCurrencyCode: string;

  defaultPriceCyclesDiffer: IterableDiffer<number>;


  @ViewChildren('outlet', {read: ViewContainerRef}) outletRef: QueryList<ViewContainerRef>;
  @ViewChildren('content', {read: TemplateRef}) contentRef: QueryList<TemplateRef<any>>;

  constructor(
    private differs: IterableDiffers,
  ) {
  }

  ngOnInit(): void {
    if (this.defaultPriceCycles) {
      this.defaultPriceCyclesDiffer = this.differs.find(this.defaultPriceCycles.prices_per_years).create();
    }
  }

  get useRelativePricesTooltip() {
    if (this.priceCycles.currency.is_default) {
      return $localize`Relative prices cannot\nbe applied to default currency.`;
    } else {
      return $localize`Calculate prices based\non default currency prices\nand and exchange rate.`;
    }
  };

  inputFocusedOut(index: number) {
    this.outletRef.get(index).clear();
    this.outletRef.get(index).createEmbeddedView(this.contentRef.get(index));
    // this.changeDetectorRef.detectChanges();
  }


  priceTrackBy(index: number) {
    return index;
  }

  relativePricesChanged() {
    if (this.priceCycles && this.priceCycles.relative_prices) {
      this.updateRelativePrices();
    }
  }

  updateRelativePrices() {
    let index = 0;
    for (const price of this.defaultPriceCycles.prices_per_years) {
      if (typeof price === 'number') {
        this.priceCycles.prices_per_years[index] = price * this.priceCycles.currency.rate;
      } else {
        this.priceCycles.prices_per_years[index] = undefined;
      }
      index = index + 1;
    }
  }

  ngDoCheck() {
    if (this.priceCycles && this.priceCycles.relative_prices && this.defaultPriceCyclesDiffer) {
      const changes = this.defaultPriceCyclesDiffer.diff(this.defaultPriceCycles.prices_per_years);
      if (changes) {
        this.updateRelativePrices();
      }
    }
  }

  autoFillPrices(disabled: boolean) {
    if (disabled) {
      return;
    }
    if (typeof this.priceCycles.prices_per_years[0] !== 'number') {
      for (let index = 0; index < this.priceCycles.prices_per_years.length; index++) {
        this.priceCycles.prices_per_years[index] = undefined;
      }
    } else if (this.priceCycles.prices_per_years[0] >= 0) {
      for (let index = 1; index < this.priceCycles.prices_per_years.length; index++) {
        if (!this.priceCycles.prices_per_years[index]) {
          this.priceCycles.prices_per_years[index] = this.priceCycles.prices_per_years[0] * (index + 1);
        }
      }
    }
  }
}
