// Angular imports //
import { Component, OnInit, Input, HostListener, ElementRef, DoCheck } from '@angular/core';
import * as moment from 'moment';

// Components //

// Interfaces //

// Services //

// Directives //
import { FbFormBase } from '../fbFormBase';

// Other //
import * as statics from '@fb/statics';


/**
 * Visar en datepicker
 * Syntax:
 * <fb-form-datepicker *parametrar></fb-form-datepicker>
 *
 *
 * Denna använder angular bootstraps datepicker. Viss dokumentation för den går att
 * hitta på http://valor-software.com/ngx-bootstrap/#/datepicker eller genom att söka
 * bland issues här https://github.com/valor-software/ngx-bootstrap/.
 * Ett annat alternativ är att titta direkt i sourcecode för datepicker.component.js
 * (I skrivande stund ligger den under \Trunk\FasIT\node_modules\ngx-bootstrap\datepicker)
 *
 * @param model Modell
 * @param label Label att visa. Visas inte om tight eller noLabel är satt
 * @param disabled Disabled om satt till true
 * @param disableReason Används som tooltip vid disabled
 * @param noLabel Sätt till true för att dölja label
 */
// Todo importera styles enligt wiki /vile
@Component({
    selector: 'fb-form-datepicker',
    templateUrl: './fb-form-datepicker.component.html'
})
export class FbFormDatepickerComponent extends FbFormBase implements OnInit, DoCheck {

    @Input()
    noLabel: boolean;
    @Input()
    disabled: boolean;
    @Input()
    disableReason: string;

    readonly inputId: string = statics.Guid.new();
    dtInput: String;
    dtPicker: Date;
    showDatePicker: boolean = false;
    isTop: boolean;

    private hostElm: Node;
    private selfElm: Node;

    constructor(private readonly elementRef: ElementRef) {
        super();
    }

    ngOnInit(): void {
        super.ngOnInit();

        this.selfElm = this.elementRef.nativeElement;
        this.hostElm = this.selfElm.parentNode;

        this.initView();
    }

    ngDoCheck(): void {
        if (this.oldModelValue !== this.model.value) {
            this.oldModelValue = this.model.value;
            this.initView();
        }
    }

    private initView(): void {
        if (this.model.value) {
            this.dtPicker = moment(this.model.value, 'YYYY-MM-DDT00:00:00').toDate();
            this.dtInput = moment(this.model.value).format('YYYY-MM-DD');
        } else {
            this.dtPicker = undefined;
            this.dtInput = undefined;
        }
    }

    openDatePicker(): void {
        this.model.setInvalidStateFromExternal('fb-form-datepicker', true, '');
        this.isTop = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) / 2 < this.elementRef.nativeElement.getBoundingClientRect().top;
        this.showDatePicker = true;
    }

    closeDatePicker(): void {
        this.showDatePicker = false;
    }

    today(): void {
        this.dtPicker = new Date();
        this.dtInput = moment(this.dtPicker).format('YYYY-MM-DD');
        this.saveModelFromDate(this.dtPicker);
        this.closeDatePicker();
    }

    onDatepickerChange(event: any): void {
        this.dtInput = moment(event).format('YYYY-MM-DD');
        this.closeDatePicker();

        this.saveModelFromDate(event);
    }

    onInputChange(event: any): void {
        if (this.checkCorrectFormat(event)) {
            this.dtPicker = moment(event, 'YYYY-MM-DDT00:00:00').toDate();
        }
    }

    cleanUp(): void {
        if (this.dtInput !== undefined && this.dtInput !== '' && !moment(this.dtInput).isValid()) {
            console.log('det här blev ju fel');
            this.model.setInvalidStateFromExternal('fb-form-datepicker', false, 'Otillåtet format för datum');
            this.updateModel(this.dtInput);
        } else {
            if (this.dtInput !== undefined && this.dtInput !== '') {
                if (!this.checkCorrectFormat(this.dtInput.toString())) {
                    this.dtInput = moment(this.dtInput).format('YYYY-MM-DD');
                }
                this.dtPicker = moment(this.dtInput.toString(), 'YYYY-MM-DDT00:00:00').toDate();
            } else {
                this.dtPicker = undefined;
                this.dtInput = undefined;
            }

            this.saveModelFromDate(this.dtPicker);
        }
    }

    @HostListener('window:click', ['$event'])
    clickOutside(event): void {
        if (!this.showDatePicker) {
            return;
        }
        statics.clickOutside(event, this.selfElm, this.hostElm, () => {
            this.closeDatePicker();
        });
    }

    private checkCorrectFormat(dateStr: string): boolean {
        return moment(dateStr, 'YYYY-MM-DD', true).isValid();
    }

    private saveModelFromDate(date: Date): void {
        const saveString: string = moment(date).format('YYYY-MM-DDT00:00:00');
        this.updateModel(saveString);
    }
}