import {Component, ViewEncapsulation, Input, EventEmitter, Output, Optional, Host, ViewChildren, QueryList, OnInit} from "@angular/core";
import {NgFor} from "@angular/common";

import {RippleEffect} from "../ripple-effect/RippleEffect";
import {CoreControlFormBase} from "../odisseia-form/CoreControlFormBase";
import {CoreForm} from "../odisseia-form/odisseia-form";
import {ObjectOrArrayPipe} from "../../pipes/objectOrArrayPipe";
import {CoreIcon} from "../core-icon/core-icon";


/**
 * Created by jd on 03/05/2016.
 */

@Component(
    {
        selector: 'core-radio-button',
        pipes: [ObjectOrArrayPipe],
        encapsulation: ViewEncapsulation.None,
        templateUrl: "node_modules/bia-framework/components/core-radio-button/core-radio-button.template.html",
        styleUrls: ["node_modules/bia-framework/components/core-radio-button/core-radio-button.style.css"],
        directives: [CoreIcon, RippleEffect, NgFor]
    }
)
export class CoreRadioButton extends CoreControlFormBase implements OnInit
{
    _bind:any;
    @Input()
    set bind(value:any)
    {
        this._bind = value;
        this.bindChange.emit(value);
        this.selectedIndex = this.getIndexFromBind();
    }

    get bind()
    {
        return this._bind;
    }

    @Output()
    bindChange = new EventEmitter<Object>();

    @Input()
    source:Array<any>;

    @Input("selected-value-path")
    selectedValuePath:string;

    @Input("show-value-path")
    showValuePath:string;

    @Input()
    color:string;

    selectedIndex:number;

    @ViewChildren(RippleEffect)
    rippleEffect:QueryList<RippleEffect>;

    constructor(@Optional() @Host() private hostForm?:CoreForm)
    {
        super(hostForm);
    }



    ngOnInit():any
    {
        this.selectedIndex = this.getIndexFromBind();
        return undefined;
    }

    public onSelect = (item:any, index:number):void =>
    {
        var newValue = null;
        
        if (this.selectedValuePath)
            newValue = this.source[index][this.selectedValuePath];
        else
            newValue = this.source[index];

        this.rippleEffect.toArray()[index].showEffect(null);

        //FormBase
        if (this.isInForm() && this.control != null)
            this.control.updateValue(newValue);
    };

    private getIndexFromBind = ()=>
    {
        if (this.bind != null && this.source != null)
        {
            if (this.selectedValuePath != null)
            {
                var i = null;
                this.source.forEach((item, index) =>
                {
                    if (item[this.selectedValuePath] != null && item[this.selectedValuePath] == this.bind)
                        i = index;
                });
                return i;
            }
            else
            {
                var e = null;
                this.source.forEach((item, index) =>
                {
                    if (item == this.bind)
                        e = index;
                });

                return e;
            }
        }
        return null;


    };


}