import { Image, Stretch } from "tns-core-modules/ui/image";
import { Label } from "tns-core-modules/ui/label";
import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
import { Color } from "tns-core-modules/color";
import * as imageSource from "tns-core-modules/image-source";
import { isAndroid } from "tns-core-modules/platform";

const sources = [
    { w: 32, h: 18, src: "i32x18" },
    { w: 32, h: 32, src: "i32x32" },
    { w: 18, h: 32, src: "i18x32" }
].map(({w, h, src})  => ({w, h, src: `res://${src}` }));
const stretchModes: Stretch[] = ["none", "aspectFill", "aspectFit", "fill"];
const widths = [ +8, 0, -8 ]
const heights = [ +8, 0, -8 ]

export function navigatingTo(args) {
    const variants: { src: string, stretch: Stretch, width: number, height: number }[] = [];

    // Better way for cartesian product?
    sources.forEach(src =>
        stretchModes.forEach(stretch =>
            widths.forEach(width =>
                heights.forEach(height =>
                    variants.push({ src: src.src, stretch, width: src.w + width, height: src.h + height })))));

    const grid: LayoutBase = args.object.getViewById("root");
    const label: Label = args.object.getViewById("label");
    let lastTap = null;
    variants.forEach(({ src, stretch, width, height}) => {
        const image = new Image();
        image.src = src;

        image.backgroundColor = "yellow";
        image.width = <any>(width + "px");
        image.height = <any>(height + "px");

        image.stretch = stretch;
        image.borderColor = "yellow";
        image.margin = "1px";
        (<any>image).tag = `${width} ${height} ${stretch} ${src.substr(src.lastIndexOf("/") + 1)}`;
        image.addEventListener("tap", (args: any) => {
            if (lastTap) {
                lastTap.borderColor = "yellow";
            }
            label.text = args.object.tag;
            args.object.borderColor = "red";
            lastTap = args.object;
        });
        grid.addChild(image);
    });
}