import { Component, OnInit } from '@angular/core';
import { formatDate } from "@angular/common";
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { FieldType, FieldTypeConfig } from '@ngx-formly/core';


@Component({
  selector: 'app-form-datepicker-type',
  template: `
    <label *ngIf="props.label && props['hideLabel'] !== true" [attr.for]="id"
         class="form-label">{{ props.label }}
        <span *ngIf="props.required && props['hideRequiredMarker'] !== true" aria-hidden="true">*</span>
    </label>
    <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
        <formly-validation-message [field]="field"></formly-validation-message>
    </div>
    <input type="hidden" 
           [formControl]="formControl" 
           [formlyAttributes]="field"
    />
    <div class="input-group" *ngIf="! this.field.props.readonly">
        <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button"><i-bs name="calendar-date-fill"></i-bs></button>
        <input
            class="form-control"
            placeholder="yyyy-mm-dd"
            name="dp"
            [(ngModel)]="date"
            (ngModelChange)="changeDatetime($event)"
            ngbDatepicker
            #d="ngbDatepicker"
            [class.is-invalid]="showError"
        />
    </div>
    <div class="input-group" *ngIf="this.field.props.readonly">
        <input class="form-control" value="{{ this.datetime ? this.datetime.toLocaleString() : '' }}" disabled=""/>
    </div>
  `,
})
export class DateTypeComponent extends FieldType<FieldTypeConfig> implements OnInit
{
    public date : NgbDateStruct | null = null;
    public datetime : Date | null = null;


    constructor() {
        super();
    }

    ngOnInit() {
        if (this.formControl.value === undefined) {
            this.changeDatetime({});
        } else {
            this.datetime = new Date(this.formControl.value);
            this.date = this.getDateStruct(this.datetime);
        }

        this.formControl.valueChanges.subscribe(value => {
            if (value) {
                this.datetime = new Date(value);
                this.date = this.getDateStruct(this.datetime);
            } else {
                this.datetime = null;
                this.date = null;
            }
        })
    }

    getDateStruct(d: Date) {
        return {
            year: d.getFullYear(),
            month: d.getMonth() + 1,
            day: d.getDate(),
        }
    }

    changeDatetime(event: any) {
        if (this.date) {
            if (!this.datetime) {
                this.datetime = new Date();
            }
            this.datetime.setFullYear(this.date.year)
            this.datetime.setMonth(this.date.month - 1)
            this.datetime.setDate(this.date.day)

            this.formControl.setValue(
                formatDate(this.datetime, 'YYYY-MM-dd', 'EN_US', 'CET')
            )
        } else {
            this.datetime = null;
            this.date = null;
            this.formControl.setValue('')
        }
    }
}
