import { UiElement } from "./ui-element";
import { TranslatorService } from '../hmg-common/services/translator/translator.service';

export class SelectInput 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) {
        super(elementId, containerId, '');
        this.direction = TranslatorService.getCurrentLanguageName();
        this.createElement(this.getTemplate());

    }


    public getTemplate() {
        let template :string = "";
        let requiredClass: string = "";
        if (this.required == 'Y')
            requiredClass = "requiredClass"
        if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
        if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
    //     const template =
    //    "<div class='custom-text-area-element dynamicField' style='"+this.hidden+"'>" +
    //    " <label  class='daynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
    //    " <select [ngClass]= direction == 'en'? 'daynamicForm-Select' : 'ardaynamicForm-Select' id='" + this.elementId + "' "+this.disabled+">"+
    //    "<option value='"+this.value+"' >"+this.value+"</option>"+
    //    "</select>"+
    //    "</div> ";
   if(this.direction == 'en'){
     template =
    "<div class='custom-text-area-element dynamicField' style='"+this.hidden+"'>" +
    " <label  class='daynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
    " <select  class='daynamicForm-Select' id='" + this.elementId + "' "+this.disabled+">"+
    "<option value='"+this.value+"' >"+this.value+"</option>"+
    "</select>"+
    "</div> ";
   }
   else{
     template =
    "<div class='custom-text-area-element dynamicField' style='"+this.hidden+"'>" +
    " <label  class='ardaynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
    " <select  class='ardaynamicForm-Select' id='" + this.elementId + "' "+this.disabled+">"+
    "<option value='"+this.value+"' >"+this.value+"</option>"+
    "</select>"+
    "</div> ";

   }
//[ngClass]=\"{\'daynamicForm-Select\': !ar,\'daynamicForm-Selects\':ar}\
    //    [ngClass]= direction == 'en'? 'daynamicForm-Select' : 'daynamicForm-Selects'
    //    [ngClass]=" direction === 'rtl' ?  'daynamicForm-Selects' : 'daynamicForm-Select'" 
    //    class='daynamicForm-Select' id='" + this.elementId + "'


            // "<ion-item style='" + this.hidden + "'>" +
            // "<ion-label id='title' >" + this.label + "</ion-label>" +
            // "<ion-select id='" + this.elementId + "' " + this.disabled + ">" +
         
            // "</ion-select>" +
            // "</ion-item> ";

        return template;
    }
}