package issues.example_complex_item_renderer;

import haxe.ui.containers.HBox;
import haxe.ui.containers.VBox;
import haxe.ui.containers.dialogs.Dialogs;
import haxe.ui.core.ItemRenderer;
import haxe.ui.events.ItemEvent;
import haxe.ui.events.MouseEvent;

@:xml('
<vbox style="padding: 5px;">
    <hbox>
        <button id="editSelectedItemButton" text="Edit Selected Item" />
        <button id="addUserButton" text="Add User" />
        <button id="removeUserButton" text="Remove User" />
    </hbox>

    <listview id="theList" width="500" height="200">
        <my-item-renderer />
    </listview>
</vbox>
')
class MainView extends VBox {
    public function new() {
        super();

        theList.itemRenderer = new MyItemRenderer();

        theList.dataSource.add({
            balances: {
                currency1: { amount: 101, primaryIcon: "error-small.png" },
                currency2: { amount: 102, primaryIcon: "help-small.png", secondaryIcon: "warning-small.png" }
            },
            users: [
                { name: "User 1", image: "error-large.png"},
                { name: "User 2", image: "info-large.png"},
                { name: "User 3", image: "warning-large.png"},
            ],
            watching: {
                watchers1: { current: 5, max: 10 },
                watchers2: { current: 8, max: 30 }
            }
        });

        theList.dataSource.add({
            balances: {
                currency1: { amount: 107, primaryIcon: "error-small.png" },
                currency2: { amount: 302, primaryIcon: "help-small.png", secondaryIcon: "warning-small.png" }
            },
            users: [
                { name: "User 4", image: "info-large.png"},
                { name: "User 5", image: "error-large.png"},
                { name: "User 6", image: "warning-large.png"},
                { name: "User 7", image: "help-large.png"},
            ],
            watching: {
                watchers1: { current: 1, max: 10 },
                watchers2: { current: 14, max: 30 }
            }
        });

        theList.dataSource.add({
            balances: {
                currency1: { amount: 42, primaryIcon: "error-small.png" },
                currency2: { amount: 888, primaryIcon: "help-small.png", secondaryIcon: "warning-small.png" }
            },
            users: [
                { name: "User 8", image: "info-large.png"},
                { name: "User 9", image: "error-large.png"},
            ],
            watching: {
                watchers1: { current: 1, max: 10 },
                watchers2: { current: 14, max: 30 }
            }
        });
    }

    @:bind(editSelectedItemButton, MouseEvent.CLICK)
    private function onEditSelectedItemButton(_) {
        var selectedIndex = theList.selectedIndex;
        if (selectedIndex == -1) {
            return;
        }

        // note: if datasource was typed (and implemented IDataItem) then you would need to update it
        var item = theList.dataSource.get(selectedIndex);
        item.balances.currency1.amount = Std.random(999);
        item.balances.currency2.amount = Std.random(999);
        item.watching.watchers1.current = Std.random(50);
        item.watching.watchers1.max = Std.random(50) + 50;
        item.watching.watchers2.current = Std.random(50);
        item.watching.watchers2.max = Std.random(50) + 50;
        theList.dataSource.update(selectedIndex, item);
    }

    @:bind(addUserButton, MouseEvent.CLICK)
    private function onAddUser(_) {
        var selectedIndex = theList.selectedIndex;
        if (selectedIndex == -1) {
            return;
        }

        // note: if datasource was typed (and implemented IDataItem) then you would need to update it
        var item = theList.dataSource.get(selectedIndex);
        if (item.users == null) {
            item.users = [];
        }
        item.users.push({
            name: "New " + Std.random(9),
            image: "info-large.png"
        });
        theList.dataSource.update(selectedIndex, item);
    }

    @:bind(removeUserButton, MouseEvent.CLICK)
    private function onRemoveUser(_) {
        var selectedIndex = theList.selectedIndex;
        if (selectedIndex == -1) {
            return;
        }

        // note: if datasource was typed (and implemented IDataItem) then you would need to update it
        var item = theList.dataSource.get(selectedIndex);
        if (item.users == null) {
            return;
        }
        item.users.pop();
        theList.dataSource.update(selectedIndex, item);
    }

    @:bind(theList, ItemEvent.COMPONENT_EVENT)
    private function onListComponentEvent(e:ItemEvent) {
        Dialogs.messageBox("You clicked on " + e.source.id + " from row #" + e.itemIndex);
    }
}

@:xml('
<item-renderer width="100%" layoutName="horizontal">
    <style>
        .transparent-scrollview {
            border: none;
            background-color: none;
        }
    </style>
    <vbox verticalAlign="center">
        <balance id="theBalance1" />
        <balance id="theBalance2" />
    </vbox>
    <rule direction="vertical" />
    <scrollview width="100%" styleName="transparent-scrollview">
        <hbox id="avatarsContainer">
        </hbox>
    </scrollview>
    <rule direction="vertical" />
    <vbox verticalAlign="center">
        <count id="theWatchers1" width="50" />
        <count id="theWatchers2" />
    </vbox>
    <rule direction="vertical" />
    <vbox verticalAlign="center">
        <button id="enterButton" text="Enter" />
        <link text="Watch" horizontalAlign="center" />
    </vbox>
</item-renderer>
')
class MyItemRenderer extends ItemRenderer {
    private override function onDataChanged(data:Dynamic) {
        super.onDataChanged(data);
        if (data != null) {
            // set the data from the data item -> item renderer sub components
            // balances
            theBalance1.balance = data.balances.currency1.amount;
            theBalance1.primaryIcon = data.balances.currency1.primaryIcon;
            theBalance1.secondaryIcon = data.balances.currency1.secondaryIcon;
            theBalance2.balance = data.balances.currency2.amount;
            theBalance2.primaryIcon = data.balances.currency2.primaryIcon;
            theBalance2.secondaryIcon = data.balances.currency2.secondaryIcon;

            // users
            avatarsContainer.removeAllComponents();
            if (data.users != null) {
                var users:Array<Dynamic> = data.users;
                for (user in users) {
                    var avatar = new Avatar();
                    avatar.name = user.name;
                    avatar.image = user.image;
                    avatarsContainer.addComponent(avatar);
                }
            }

            // watchers
            theWatchers1.current = data.watching.watchers1.current;
            theWatchers1.max = data.watching.watchers1.max;
            theWatchers2.current = data.watching.watchers2.current;
            theWatchers2.max = data.watching.watchers2.max;
        }
    }
}

@:xml('
<hbox>
    <image id="thePrimaryIcon" hidden="true" />
    <image id="theSecondaryIcon" hidden="true" />
    <label id="theBalance" text="n/a" />
</hbox>
')
class Balance extends HBox {
    public var balance(null, set):Float;
    private function set_balance(value:Float):Float {
        theBalance.text = Std.string(value);
        return value;
    }

    public var primaryIcon(null, set):String;
    private function set_primaryIcon(value:String):String {
        if (value != null) {
            thePrimaryIcon.resource = "haxeui-core/styles/shared/" + value;
            thePrimaryIcon.show();
        }
        return value;
    }

    public var secondaryIcon(null, set):String;
    private function set_secondaryIcon(value:String):String {
        if (value != null) {
            theSecondaryIcon.resource = "haxeui-core/styles/shared/" + value;
            theSecondaryIcon.show();
        }
        return value;
    }
}

@:xml('
<vbox>
    <image id="theImage" />
    <label id="theName" horizontalAlign="center" />
</vbox>
')
class Avatar extends VBox {
    public var image(null, set):String;
    private function set_image(value:String):String {
        if (value != null) {
            theImage.resource = "haxeui-core/styles/shared/" + value;
        }
        return value;
    }

    public var name(null, set):String;
    private function set_name(value:String):String {
        theName.text = value;
        return value;
    }
}

@:xml('
<hbox>
    <label id="theCurrent" text="0" />
    <label text="/" />
    <label id="theMax" text="0" />
</hbox>
')
class Count extends HBox {
    public var current(null, set):Float;
    private function set_current(value:Float):Float {
        theCurrent.text = Std.string(value);
        return value;
    }

    public var max(null, set):Float;
    private function set_max(value:Float):Float {
        theMax.text = Std.string(value);
        return value;
    }
}