import ATV from 'atvjs';
// or
var ATV = require('atvjs');

function onEvaluate(success) {
	if (!success) {
		// application failed to load
	}
}

App.onLaunch = function(options) {
	var baseurl = options.BASEURL;
	App.launchOptions = options;
	evaluateScripts([`${baseurl}atv.min.js`, `${baseurl}app.js`], onEvaluate);
};

// then in your app.js you will have the instance of ATV library available
// you can contain your entire application code inside app.js

ATV.Page.create({
	name: 'home',
	// use a template function from your favourite templating engine
	// or pass a raw template function
	template(data) {
		return `<document>
					<alertTemplate>
						<title>${data.title}</title>
						<description>${data.description}</description>
					</alertTemplate>
				</document>`;
	},
	// pass some raw data to be applied
	// or a data function that returns the data
	data: {
		title: 'Homepage',
		description: 'This is my super awesome homepage created using atvjs.'
	}
});

// later in your application you can do something like below to navigate to the page
ATV.Navigation.navigate('home');

let myPageStyles = `
.text-bold {
	font-weight: bold;
}
.text-white {
	color: rgb(255, 255, 255);
}
`;

ATV.Page.create({
	name: 'home',
	style: myPageStyles,
	template: your_template_function,
	data: your_data
});

ATV.Page.create({
	name: 'home',
	url: 'path/to/your/api/that/returns/json',
	template: your_template_function
});

// or you can transform the response before applying to your template
ATV.Page.create({
	name: 'home',
	url: 'path/to/your/api/that/returns/json',
	template: your_template_function,
	data(response) {
		// transform your response before applying to your template
		let transformedData = someTransformationOfResponse(response);
		return transformedData;
	}
});

ATV.Page.create({
	name: 'mypage',
	template: your_template_function,
	data: your_data,
	events: {
		select: 'onSelect',
		highlight: 'onHighlight'
	},
	// method invoked in the scope of the current object and
	// 'this' will be bound to the object at runtime
	// so you can easily access methods and properties and even modify them at runtime
	onSelect(e) {
		let element = e.target;
		let someCheckForElementType = element.getAttribute('data-my-attribute');
		let someOtherCheckForElementType = element.getAttribute('data-my-other-attribute');

		if (someCheckForElementType) {
			this.doSomethingOnElementType1();
		}

		if (someOtherCheckForElementType) {
			this.doSomethingOnElementType2();
		}
	},
	onHighlight(e) {
		// same as above
	},
	doSomethingOnElementType1() {
		// some awesome action
	},
	doSomethingOnElementType2() {
		// some other awesome action
	}
});

ATV.Page.create({
	name: 'login',
	template: your_template_function,
	// the ready method is called each time the navigation to this page is performed and
	// the options object is passed to the method at runtime
	// use options to pass any dynamic state of your application
	// you can then use this state and populate your data (either using custom ajax or some other logic)
	// once the data is populated, call the resolve method with the data or reject method for failure
	ready(options, resolve, reject) {
		let data = {
			username: options.username,
			password: options.password
		};
		// perform ajax to get the data
		// the ajax method in the library returns an instance of the Promise object
		ATV
			.Ajax
			.post('someURL', {data: data})
			.then((xhr) => {
				// xhr succeeded
				let response = xhr.response;
				// call resolve with the data that will be applied to the template
				// you can even call resolve with false to skip navigation
				resolve({
					name: response.name,
					message: response.message
				});
			}, (xhr) => {
				// xhr failed
				let response = xhr.response;
				reject({
					status: xhr.status,
					message: response.message
				});
			});
	}
});
// later in your application
ATV.Navigation.navigate('login', {username: 'emadalam', password: '123456'});

// create your pages
let SearchPage = ATV.Page.create({/* page configurations */});
let HomePage = ATV.Page.create({/* page configurations */});
let MoviesPage = ATV.Page.create({/* page configurations */});
let TVShowsPage = ATV.Page.create({/* page configurations */});

// create menu page
ATV.Menu.create({
	// any attributes that you want to set on the menuBar element of TVML
	attributes: {},
	// any attributes that you want to set on the root level menuBarTemplate element of TVML
	rootTemplateAttributes {},
	// array of menu item configurations
	items: [{
		id: 'search',
		name: 'Search',
		page: SearchPage
	}, {
		id: 'homepage',
		name: 'Home',
		page: HomePage,
		attributes: {
			autoHighlight: true, // auto highlight on navigate
			reloadOnSelect: true // reloads page when selecting it, instead of loading from cache
		}
	}, {
		id: 'movies',
		name: 'Movies',
		page: MoviesPage
	}, {
		id: 'tvshows',
		name: 'TV Shows',
		page: TVShowsPage
	}]
});

// later in your application
ATV.Navigation.navigateToMenuPage();

// create your pages
let SearchPage = ATV.Page.create({/* page configurations */});
let HomePage = ATV.Page.create({/* page configurations */});
let MoviesPage = ATV.Page.create({/* page configurations */});
let TVShowsPage = ATV.Page.create({/* page configurations */});
let LoginPage = ATV.Page.create({/* page configurations */});

// template functions
const loaderTpl = (data) => `<document>
	<loadingTemplate>
		<activityIndicator>
			<title>${data.message}</title>
		</activityIndicator>
	</loadingTemplate>
</document>`;

const errorTpl = (data) => `<document>
	<descriptiveAlertTemplate>
		<title>${data.title}</title>
		<description>${data.message}</description>
	</descriptiveAlertTemplate>
</document>`;

// Global TVML styles
let globalStyles = `
.text-bold {
	font-weight: bold;
}
.text-white {
	color: rgb(255, 255, 255);
}
.dark-background-color {
	background-color: #091a2a;
}
.button {
	background-color: rgba(0, 0, 0, 0.1);
	tv-tint-color: rgba(0, 0, 0, 0.1);
}
`;

// start your application by passing configurations
ATV.start({
	style: globalStyles,
	menu: {
		attributes: {},
		items: [{
			id: 'search',
			name: 'Search',
			page: SearchPage
		}, {
			id: 'homepage',
			name: 'Home',
			page: HomePage,
			attributes: {
				autoHighlight: true // auto highlight on navigate
			}
		}, {
			id: 'movies',
			name: 'Movies',
			page: MoviesPage
		}, {
			id: 'tvshows',
			name: 'TV Shows',
			page: TVShowsPage
		}]
	},
	templates: {
		// loader template
		loader: loaderTpl,
		// global error template
		error: errorTpl,
		// xhr status based error messages
		status: {
			'404': () => errorTpl({
				title: '404',
				message: 'The given page was not found'
			}),
			'500': () => errorTpl({
				title: '500',
				message: 'An unknown error occurred, please try again later!'
			})
		}
	},
	// global event handlers that will be called for each of the pages
	handlers: {
		select: {
			globalSelecthandler(e) {
				let element = e.target;
				let someElementTypeCheck = element.getAttribute('data-my-attribute');

				if (elementTypeCheck) {
					// perform action
				}
			}
		}
	},
	onLaunch(options) {
		// navigate to menu page
		ATV.Navigation.navigateToMenuPage();
		// or you can navigate to previously created page
		// ATV.Navigation.navigate('login');
	}
});