import Bind from "@web-atoms/core/dist/core/Bind";
import XNode from "@web-atoms/core/dist/core/XNode";
import StyleRule from "@web-atoms/core/dist/style/StyleRule";
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
import CSS from "@web-atoms/core/dist/web/styles/CSS";
import ListRepeater from "@web-atoms/web-controls/dist/basic/ListRepeater";
import GlobalStyles from "./GlobalStyles";

// @web-atoms/samples is name of current package
// to import an image, enter full node style module path
import logo from "@web-atoms/samples/src/images/web-atoms.png";

GlobalStyles();

export interface IProduct {
    label: string;
    value: number;
}

const css = CSS(StyleRule()
    .child(StyleRule(".list")
        .child(StyleRule("[data-item-index]")
            .child(StyleRule("img")
                .maxHeight(30)
            )
        )
    )
);

// @web-atoms-embed: navigation-page

const products: IProduct[] = [
    {
        label: "Web Atoms (Web)",
        value: 1
    },
    {
        label: "Web Atoms (Hybrid iOS)",
        value: 2
    },
    {
        label: "Web Atoms (Hybrid Droid)",
        value: 3
    },
    {
        label: "Web Atoms (Hybrid Mobile)",
        value: 4
    }
];

export default class MainPage extends AtomControl {

    private selectedProduct: IProduct;

    public create() {
        this.app.installStyleSheet("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css");
        this.selectedProduct = products[0];
        this.render(<div class={css}>
            <ListRepeater
                class="list"
                items={products}
                selectedItem={Bind.twoWays(() => this.selectedProduct)}
                itemRenderer={(item: IProduct) =>
                    <div data-layout="row">
                        <img src={logo}/>
                        {item.label}
                    </div>}
                />
            <div>
                <div>Selected: <span text={Bind.oneWay(() => this.selectedProduct.label)}/></div>
            </div>
        </div>);
    }

}