import { UiElement } from './ui-element';
export class DateInput extends UiElement {
    private currentDate: any = '';
    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() {
        let date = new Date();
        this.value = date.toISOString().slice(0, 10);
    }
    dateChange($event){
        console.log($event)
    }
    public getTemplate() {
        let requiredClass: string = "";
        const doneText = this.language === 'en' ? 'Done' : 'تم';
        const cancelText = this.language === 'en' ? 'Cancel' : 'إلغاء';
        if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
        if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
        if (this.value == "currentDate") {
            this.formatDate();
        } else {
            if (this.value) {
                this.value = new Date(this.value).toISOString().slice(0, 10);
            }
        }
        if (this.required == 'Y')
            requiredClass = "requiredClass"
        const template =
            // "<div class='custom-text-area-element' style='"+this.hidden+"'>" +
            // " <label  class='daynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
            // " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" />"+
            // "</div> ";

            "<ion-item class='dynamicField'>" +
            " <ion-label position='floating' style='font-size: medium !important;' class='dynamiclable-float " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
            // " <div class='daynamicForm-DateTime " + disaledClass + "'  id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
            "<ion-datetime min='1900' max='2100' class='onic-date' (ionChange)='setDate()'  displayFormat='MMM/DD/YYYY'   value='" + this.value + "' done-text='" + doneText + "' cancel-text='" + cancelText + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + " ></ion-datetime>" +
            // " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
            // " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
            // " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+
            "</ion-item>"

        return template;
    }

}