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


@Component({
  selector: 'app-form-datetimepicker-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>
    <input type="hidden" 
           [formControl]="formControl" 
           [formlyAttributes]="field"
    />
    <div class="input-group" *ngIf="! this.field.props.readonly">
        <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
        <input
            class="form-control"
            placeholder="yyyy-mm-dd"
            name="dp"
            [(ngModel)]="date"
            (ngModelChange)="changeDatetime($event)"
            ngbDatepicker
            #d="ngbDatepicker"
            [class.is-invalid]="showError"
        />
        <ngb-timepicker 
                (ngModelChange)="changeDatetime($event)"
                [(ngModel)]="time" 
                [seconds]="true">
        </ngb-timepicker>
    </div>
    <div class="input-group" *ngIf="this.field.props.readonly">
        <input class="form-control" value="{{ this.datetime ? this.datetime.toLocaleString() : '' }}" disabled=""/>
    </div>
  `,
})
export class DatetimeTypeComponent extends FieldType<FieldTypeConfig> implements OnInit
{
    public time : NgbTimeStruct | null = null;
    public date : NgbDateStruct | null = null;
    public datetime : Date | null = null;


    constructor() {
        super();
        this.time = this.getTimeStruct(new Date());
        this.date = this.getDateStruct(new Date());
    }

    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);
                this.time = this.getTimeStruct(this.datetime);
            } else {
                this.datetime = null;
                this.date = null;
                this.time = null;
            }
        })
    }

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

    getTimeStruct(d: Date) {
        return {
            hour: d.getHours(),
            minute: d.getMinutes(),
            second: d.getSeconds(),
        }
    }

    changeDatetime(event: any) {
        if (this.date && this.time) {
            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.datetime.setHours(this.time.hour)
            this.datetime.setMinutes(this.time.minute)
            this.datetime.setSeconds(this.time.second)

            this.formControl.setValue(
                formatDate(this.datetime, 'YYYY-MM-ddTHH:mm:ss.SSS', 'EN_US', 'CET')
            )
        } else {
            this.datetime = null;
            this.date = null;
            this.time = null;
            this.formControl.setValue('')
        }
    }
}
