import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
import { createDatePicker, type DatePickerInstance } from "@schedulespark/date-picker";
import "@schedulespark/date-picker/styles.css";

@Component({
  selector: "app-date-picker-field",
  template: `<div #host></div>`
})
export class DatePickerFieldComponent implements AfterViewInit, OnDestroy {
  @ViewChild("host", { static: true }) host!: ElementRef<HTMLDivElement>;
  private picker?: DatePickerInstance;

  ngAfterViewInit(): void {
    this.picker = createDatePicker({
      label: "Start date",
      value: "2026-07-04",
      onChange: console.log
    });

    this.picker.mount(this.host.nativeElement);
  }

  ngOnDestroy(): void {
    this.picker?.destroy();
  }
}