import * as pages from '@nativescript/core/ui/page';
import * as button from '@nativescript/core/ui/button';

import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';

let testIndex = 0;
const tests = [
	{ name: 'black hex color only', background: '#000000' },
	{ name: 'yellow hex color only', background: '#ffff00' },
	{ name: 'blue color only', background: 'blue' },

	{ name: 'repeat image only', background: 'url("~/resources/images/icon.png")' },
	{ name: 'linear gradient red-blue only', background: 'linear-gradient(to bottom, red, blue)' },

	{ name: '[straight] image only, no-repeat ', background: 'url("~/resources/images/icon.png") no-repeat' },
	{ name: '[straight] green color, image, no-repeat', background: 'green url("~/resources/images/icon.png") no-repeat' },
	{ name: '[straight] yellow hex color, image, no-repeat, position pixels', background: '#ffff00 url("~/resources/images/icon.png") no-repeat 200px 200px' },
	{ name: '[straight] yellow hex color, image, repeat-y, position pixels', background: '#ffff00 url("~/resources/images/icon.png") repeat-y 100px 500px' },
	{ name: '[straight] orange hex color, image, no-repeat, position percents', background: '#F9791F url("~/resources/images/icon.png") no-repeat 100% 100%' },
	{ name: '[straight] green color, image, repeat-x, position percents', background: 'green url("~/resources/images/icon.png") repeat-x 100% 100%' },
	{ name: '[straight] blue color, image, repeat-x, position', background: 'blue url("~/resources/images/icon.png") repeat-x 150 150' },

	{ name: '[shuffle] no-repeat, image only', background: 'no-repeat url("~/resources/images/icon.png")' },
	{ name: '[shuffle] no-repeat, green color, image, ', background: 'no-repeat green url("~/resources/images/icon.png")' },
	{ name: '[shuffle] yellow hex color, position pixels, image, no-repeat', background: '#ffff00 200px 200px url("~/resources/images/icon.png") no-repeat' },
	{ name: '[shuffle] image, repeat-y, yellow hex color, position pixels', background: 'url("~/resources/images/icon.png") repeat-y #ffff00 100px 500px' },
	{ name: '[shuffle] position percents, image, no-repeat, orange hex color', background: '100% 100% url("~/resources/images/icon.png") no-repeat #F9791F' },
	{ name: '[shuffle] position percents, image, repeat-x, green color', background: '100% 100% url("~/resources/images/icon.png") repeat-x green' },
	{ name: '[shuffle] image, repeat-x, position, blue color,', background: 'url("~/resources/images/icon.png") repeat-x 150 150 blue' },
];

export function onLoaded(args) {
	applyNextStyle(args);
}

export function onButtonTap(args) {
	applyNextStyle(args);
}

function applyNextStyle(args) {
	let page = <pages.Page>args.object.page;
	let btn = <button.Button>args.object;
	let gridElement = <GridLayout>page.getViewById('Container');

	btn.text = tests[testIndex].name;
	gridElement.background = tests[testIndex].background;

	testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
}