'use strict';

/*
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| IBM Cognos Products: Storytelling
 *| (C) Copyright IBM Corp. 2018, 2019
 *|
 *| US Government Users Restricted Rights - Use, duplication or disclosure
 *| restricted by GSA ADP Schedule Contract with IBM Corp.
 *+------------------------------------------------------------------------+
 */

define(['gemini/dashboard/glass/BaseView', 'gemini/dashboard/views/LayoutPickerView', 'storytelling/nls/StringResources', 'text!storytelling/layout/templates/storyLayoutListing.json', 'text!storytelling/glass/templates/StoryLayoutPickerView.html', 'baglass/core-client/js/core-client/utils/Utils', '../lib/@ba-ui-toolkit/ba-graphics/dist/illustrations-js/slideshow_128', '../lib/@ba-ui-toolkit/ba-graphics/dist/illustrations-js/guided-journey-1_128', '../lib/@ba-ui-toolkit/ba-graphics/dist/illustrations-js/guided-journey-2_128', '../lib/@ba-ui-toolkit/ba-graphics/dist/illustrations-js/guided-journey-3_128', '../lib/@ba-ui-toolkit/ba-graphics/dist/illustrations-js/guided-journey-4_128', '../lib/@ba-ui-toolkit/ba-graphics/dist/illustrations-js/guided-journey-5_128', '../lib/@ba-ui-toolkit/ba-graphics/dist/illustrations-js/time-sequence_128'], function (BaseView, LayoutPickerView, stringResources, templateListing, template, Utils, slideshowIcon, PanAndZoomLayout1, PanAndZoomLayout2, PanAndZoomLayout3, PanAndZoomLayout4, PanAndZoomLayout5, PanAndZoomLayout6) {

	var icons = {
		PanAndZoomLayout1: PanAndZoomLayout1,
		PanAndZoomLayout2: PanAndZoomLayout2,
		PanAndZoomLayout3: PanAndZoomLayout3,
		PanAndZoomLayout4: PanAndZoomLayout4,
		PanAndZoomLayout5: PanAndZoomLayout5,
		PanAndZoomLayout6: PanAndZoomLayout6
	};

	var StoryLayoutPickerView = BaseView.extend({

		templateString: template,

		events: {
			'primaryaction .panAndZoomHeader .svgIcon': 'onPanAndZoomInfoClick',
			'primaryaction .slideshowContent .layoutTemplateItem': 'onSlideshowSelected',
			'dblclick .layoutTemplateItem': 'onDoubleClick'
		},

		init: function init(options) {
			StoryLayoutPickerView.inherited('init', this, arguments);
			this.action = options.action;
		},

		render: function render() {
			this.$el.empty();

			var html = this.dotTemplate({
				slideshowTitle: stringResources.get('createAvSlideShowLabel'),
				panAndZoomTitle: stringResources.get('createAvPanAndZoomLabel'),
				panAndZoomText: stringResources.get('panAndZoomLayoutFooter')
			});

			this._setTemplateIcons();

			this.layoutPickerView = new LayoutPickerView({
				action: this.action,
				selectAction: this.onPanAndZoomSelected.bind(this),
				templateListing: templateListing,
				disableHeaderSection: true,
				disableFooterSection: true,
				stringResources: stringResources
			});

			this.layoutPickerView.setNavigationTemplate('panAndZoom');
			this.layoutPickerView.render();

			this.$el.html(html);
			this.$el.find('.panAndZoomContent').append(this.layoutPickerView.el);

			Utils.setIcon(this.$el.find('.slideshowContent .layoutIcon'), slideshowIcon.default.id);

			this.onSlideshowSelected();
		},

		_setTemplateIcons: function _setTemplateIcons() {
			var templateListingObj = JSON.parse(templateListing);
			templateListingObj.templates.forEach(function (template) {
				if (template.icon && icons[template.name]) {
					template.icon = icons[template.name].default.id;
				}
			});
			templateListing = JSON.stringify(templateListingObj);
		},

		onDoubleClick: function onDoubleClick() {
			if (this.action) {
				this.action();
			}
		},

		onPanAndZoomInfoClick: function onPanAndZoomInfoClick() {
			this.$el.find('.panAndZoomText').toggle();
		},

		onSlideshowSelected: function onSlideshowSelected(event) {
			var $slideshowTile = this.$el.find('.slideshowContent .layoutTemplateItem');
			if (event && event.keyCode === 13 && this.action && $slideshowTile.hasClass('selected')) {
				// enter key should trigger action if slideshow tile is already selected
				this.action();
			} else {
				this.layoutPickerView.selectLayout(this._getDefaultSlideshowName());
				$slideshowTile.addClass('selected');
				$slideshowTile.attr('aria-checked', 'true');
				var $panAndZoom1Tile = this.$el.find('.panAndZoomContent .layoutTemplateItem.panAndZoom').first();
				$panAndZoom1Tile.attr('tabindex', '0');
			}
		},

		onPanAndZoomSelected: function onPanAndZoomSelected() {
			var $slideshowTile = this.$el.find('.slideshowContent .layoutTemplateItem');
			$slideshowTile.removeClass('selected');
			$slideshowTile.attr('aria-checked', 'false');
		},

		getSelectedLayoutSpec: function getSelectedLayoutSpec() {
			return this.layoutPickerView.getSelectedLayoutSpec();
		},

		_getDefaultSlideshowName: function _getDefaultSlideshowName() {
			return 'SlideShowLayout';
		}

	});

	return StoryLayoutPickerView;
});
//# sourceMappingURL=StoryLayoutPickerView.js.map