package custom;

import haxe.ui.components.CheckBox;
import haxe.ui.components.DropDown;
import haxe.ui.components.Image;
import haxe.ui.components.Label;
import haxe.ui.components.TextField;
import haxe.ui.containers.Box;
import haxe.ui.containers.Grid;
import haxe.ui.containers.HBox;
import haxe.ui.containers.ScrollView;
import haxe.ui.containers.VBox;
import haxe.ui.core.Component;
import haxe.ui.core.KeyboardEvent;
import haxe.ui.core.UIEvent;
import haxe.ui.data.ArrayDataSource;

class PropertyEditor extends ScrollView {
    private var _groups:Array<PropertyEditorGroup> = [];

    public function new() {
        super();

        percentContentWidth = 100;
    }

    public function addGroup(name:String):PropertyEditorGroup {
        if (getGroup(name) != null) {
            return getGroup(name);
        }
        var group:PropertyEditorGroup = new PropertyEditorGroup();
        group.percentWidth = 100;
        group.title = name;
        addComponent(group);
        group.registerEvent(UIEvent.CHANGE, function(e:UIEvent) {
            var newEvent:UIEvent = new UIEvent(e.type);
            newEvent.data = e.data;
            dispatch(newEvent);
        });

        _groups.push(group);
        return group;
    }

    public function clearGroups() {
        for (g in _groups) {
            removeComponent(g);
        }
        _groups = [];
    }

    public function getGroup(name:String):PropertyEditorGroup {
        var group:PropertyEditorGroup = null;
        for (g in _groups) {
            if (g.title == name) {
                group = g;
                break;
            }
        }
        return group;
    }

    public function addProperty(groupName:String, name:String, type:String, options:Dynamic = null) {
        var group:PropertyEditorGroup = getGroup(groupName);
        if (group == null) {
            group = addGroup(groupName);
        }

        group.addProperty(name, type, options);
    }

    public function updateProperty(groupName:String, name:String, value:Dynamic) {
        var group:PropertyEditorGroup = getGroup(groupName);
        if (group == null) {
            return;
        }

        group.updateProperty(name, value);
    }

    public function addCustom(groupName:String, c:Component) {
        var group:PropertyEditorGroup = getGroup(groupName);
        if (group == null) {
            group = addGroup(groupName);
        }

        group.addCustom(c);
    }
}

class PropertyEditorGroup extends VBox {
    private var _title:Label;
    private var _titleIcon:Image;

    private var _grid:Grid;
    private var _properties:Array<Dynamic> = [];

    public function new() {
        super();

        var hbox:HBox = new HBox();
        hbox.id = "title";
        hbox.percentWidth = 100;

        _titleIcon = new Image();
        _titleIcon.resource = "icons/control-270-small.png";
        hbox.addComponent(_titleIcon);

        _title = new Label();
        _title.text = "Group";
        hbox.addComponent(_title);
        addComponent(hbox);

        hbox.onClick = function(e) {
            if (childComponents.length == 2) {
                var c = childComponents[1];
                if (c.hidden == false) {
                    c.hide();
                    _titleIcon.resource = "icons/control-000-small.png";
                } else {
                    c.show();
                    _titleIcon.resource = "icons/control-270-small.png";
                }
            }
        }
    }

    public var title(get, set):String;
    private function get_title():String {
        return _title.text;
    }
    private function set_title(value:String):String {
        _title.text = value;
        return value;
    }

    public function addProperty(name:String, type:String, options:Dynamic = null) {
        if (_grid == null) {
            _grid = new Grid();
            _grid.columns = 2;
            _grid.id = "grid";
            addComponent(_grid);
        }

        var component:Component = null;
        switch (type) {
            case "text" | "float":
                component = new TextField();
                cast(component, TextField).registerEvent(UIEvent.CHANGE, function(e) {
                    var event:UIEvent = new UIEvent(UIEvent.CHANGE);
                    event.data = {
                        group: title,
                        name: name,
                        value: component.text
                    };
                    dispatch(event);
                });
            case "boolean":
                component = new CheckBox();
                cast(component, CheckBox).registerEvent(UIEvent.CHANGE, function(e) {
                    var event:UIEvent = new UIEvent(UIEvent.CHANGE);
                    event.data = {
                        group: title,
                        name: name,
                        value: cast(component, CheckBox).selected
                    };
                    dispatch(event);
                });
            case "option":
                component = new DropDown();
                var ds:ArrayDataSource<Dynamic> = new ArrayDataSource<Dynamic>();
                var arr:Array<Dynamic> = cast options;
                var v = null;
                for (a in arr) {
                    if (v == null) {
                        v = a.name;
                    }
                    ds.add({
                        value: a.name,
                        value2: a.value
                    });
                }
                cast(component, DropDown).dataSource = ds;
                cast(component, DropDown).text = "";
                cast(component, DropDown).registerEvent(UIEvent.CHANGE, function(e) {
                    var event:UIEvent = new UIEvent(UIEvent.CHANGE);
                    event.data = {
                        group: title,
                        name: name,
                        value: cast(component, DropDown).selectedItem.value2
                    };
                    dispatch(event);
                });
        }

        if (component != null) {
            component.id = name.toLowerCase();
            var box:Box = new Box();
            box.addClass("name-container");

            var label:Label = new Label();
            label.text = name;
            box.addComponent(label);
            _grid.addComponent(box);

            var box:Box = new Box();
            box.addClass("value-container");
            box.addComponent(component);
            _grid.addComponent(box);

            _properties.push({
                name: name,
                type: type,
                component: component
            });
        }
    }

    public function addCustom(c:Component) {
        addComponent(c);
    }

    public function updateProperty(name:String, value:Dynamic) {
        if (value == null) {
            return;
        }

        var prop:Dynamic = null;
        for (p in _properties) {
            if (p.name == name) {
                prop = p;
                break;
            }
        }

        if (prop != null) {
            switch (prop.type) {
                case "text" | "float":
                    cast(prop.component, TextField).text = Std.string(value);
                case "boolean":
                    cast(prop.component, CheckBox).selected = Std.string(value) == "true";
                case "option":
                    var ds:ArrayDataSource<Dynamic> = cast cast(prop.component, DropDown).dataSource;
                    var selectedIndex:Int = -1;
                    for (i in 0...ds.size) {
                        if (ds.get(i).value2 == Std.string(value)) {
                            selectedIndex = i;
                            break;
                        }

                    }
                    cast(prop.component, DropDown).selectedIndex = selectedIndex;
            }
        }
    }
}