var DependencyObservable = require("ui/core/dependency-observable");
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
var Label = require("ui/label").Label;
var enums = require("ui/enums");

const CHECKMARK_ICON = String.fromCharCode(0xea11);
const ICON_FONT = 'icomoon';

var Control = (function (_super) {
    global.__extends(SelectLayout, _super);

    Object.defineProperty(SelectLayout.prototype, "items",{
        get: function(){
            return this._items;
        },
        set: function(value){
            this._items = value;
            this.populateItems(value);
        },
        enumerable:true,
        configurable:true
    });

    function SelectLayout() {
        _super.call(this);

        this.style.backgroundColor = 'white';
        this.style.paddingLeft = 15;
        this.style.marginTop = 5

        var _selectedView = null;
        this._items = new Array();
        this.populateItems = function(){
            var items = this._items;
            this.removeChildren();
            for(var index = 0; index < items.length; index++){

                var stackLayout = new StackLayout();
                stackLayout.orientation = enums.Orientation.horizontal;
                stackLayout.id = index;

                var lblTitle = new Label();
                lblTitle.text = items[index];


                var lblIcon = new Label();
                lblIcon.id = 'icon';
                //set styles
                lblIcon.style.fontFamily = ICON_FONT;
                lblIcon.style.color = "orange";
                lblIcon.text = CHECKMARK_ICON;
                lblIcon.visibility = "collapsed";

                stackLayout.addChild(lblTitle);
                stackLayout.addChild(lblIcon);

                stackLayout.on("tap",function(){
                    _onItemTap(this);
                }.bind(stackLayout))

                this.addChild(stackLayout);

                //add Separator
                if(index != items.length-1){
                    var separator = new StackLayout();
                    separator.className='line';
                    this.addChild(separator);
                }

            }
        }

        this.on("unloaded",()=>{
            this.removeChildren();
        })

        this.getSelectedIndex = function(){
            return _selectedView.id;
        }

        //receives the view of the item tapped
        var _onItemTap = function(view){

            if(_selectedView == null){
                _selectedView = view;
                _selectedView.getViewById('icon').visibility = "visible";
            }else{
                _selectedView.getViewById('icon').visibility = "collapsed";
                _selectedView = view;
                _selectedView.getViewById('icon').visibility = "visible";
            }
            this.notify({
                eventName:"selectedValueChanged",
                object:this,
                selectedValue: view.id
            })
        }.bind(this);

    }
    return SelectLayout;

})(StackLayout);

exports.SelectLayout = Control;
exports.EVENTS = {
  VALUE_CHANGED_EVENT : "selectedValueChanged"
};

var paymentMethodControl = page.getViewById("select-payment-method");
  paymentMethodControl.items = [PAYMENT_OPTIONS.CREDIT_CARD, PAYMENT_OPTIONS.PAYPAL]