import { UiElement } from './ui-element';

export class TimeInput extends UiElement {
    // public direction: string;
    constructor(
        private label: string,
        private elementId: string,
        private value: any,
        private containerId: string,
        private disabled: string,
        private hidden: string,
        private required: string,
        private language: string = 'en') {
        super(elementId, containerId, '');
        this.createElement(this.getTemplate());

    }

    formatDate() {
        const date = new Date();
        this.value = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    }

    setDate() {}

    public getTemplate() {

        let requiredClass = '';
        let disaledClass = '';
        const doneText = this.language === 'en' ? 'Done' : 'تم';
        const cancelText = this.language === 'en' ? 'Cancel' : 'إلغاء';
        // tslint:disable-next-line: triple-equals
        if (this.required == 'Y') {
            requiredClass = 'requiredClass';
        }
        // tslint:disable-next-line: max-line-length
        if (this.disabled === 'N') { this.disabled = 'disabled'; disaledClass = 'disabled'; } else { this.disabled = ''; disaledClass = ''; }
        if (this.hidden === 'N') { this.hidden = 'display:none;'; } else { this.hidden = ''; }
        if (this.value === 'currentTime') {
            this.formatDate();
        }

        const template =
        "<ion-item class='dynamicField' style='" + this.hidden + "'>" +
        " <ion-label position='floating' style='font-size: medium !important;' class='dynamiclable-float " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
        "<ion-datetime display-format='HH:mm' picker-format='HH:mm' class='onic-date'  value='" + this.value + "' done-text='" + doneText + "' cancel-text='" + cancelText + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + " ></ion-datetime>" +
        "</ion-item>"
        return template;
    }
}
