import { Component, OnInit, Input, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"
import { FormGroup, ReactiveFormsModule } from "@angular/forms"
import { Agreement } from "../agreement.model"
import { CurrencyFormatterService } from "../currency-formatter.service"
import { NumericValueAccessorDirective, SelectValueAccessorDirective } from "../value-accessors"
import { NgIf } from "@angular/common"

@Component({
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: "app-investment-amount",
  templateUrl: "./investment-amount.component.html",
  imports: [
    ReactiveFormsModule,
    SelectValueAccessorDirective,
    NumericValueAccessorDirective,
    NgIf
  ],
  styleUrls: ["./investment-amount.component.scss"]
})
export class InvestmentAmountComponent implements OnInit {
  @Input() agreements: Record<number, Agreement>
  @Input() form: FormGroup

  constructor(public formatter: CurrencyFormatterService) {}

  ngOnInit(): void {}

  get selectedAgreement() {
    return this.agreements[this.form.value.agreement]
  }

  get agreementOptions() {
    return Object.entries(this.agreements).map(([value, { label, price }]) => {
      return {
        value,
        label: `${label} - ${this.formatter.format(price)}`
      }
    })
  }
}
