import { Component } from "@angular/core";
import { ConversionInput } from "./conversioninput";
import { ConversionType } from "./conversiontype";


@Component({
    selector: "den-inputarea",
    template: `
        <div id="wrapper-{{index}}" class="wrapper">
            <textarea id="input-{{index}}" class="input" (change)="update()" placeholder="Please enter your input ..." [(ngModel)]="conversion.content">{{conversion.content}}</textarea>
            <select id="type-{{index}}" class="conversion" (change)="convert($event)">
                <option id="-1">Select conversion ...</option>
                <option *ngFor="let c of conversions" id="{{c}}">Type {{ConversionType[c]}}</option>
            </select>
        </div>
    `
})
export class InputareaComponent {
    public index:number = 0;
    public conversions:ConversionType[] = [ConversionType.ENCODE_BASE64, ConversionType.DECODE_BASE64];
    private conversion:ConversionInput;
    private ConversionType:ConversionType = ConversionType;

    constructor() {
        console.log("Aloha, " + this.index);
        this.conversion = new ConversionInput();
        this.conversion.content = "";
        this.conversion.type = ConversionType.DECODE_BASE64;
    }

    public update():void {
        console.log(this.conversion.content);
    }

    public convert(e):void {
        this.conversion.type = ConversionType.of(+e.target.selectedOptions[0].id);
        console.log(this.conversion.type);
        switch (this.conversion.type) {
            case ConversionType.DECODE_BASE64:
                this.conversion.content = "Base64 decode";
                break;
            case ConversionType.ENCODE_BASE64:
                this.conversion.content = "Base 64 encode";
                break;
            default:
                this.conversion.content = "Unknown: " + this.conversion.type;
                break;
        }
    }

    public setIndex(index:number):void {
        this.index = index;
    }
}