'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2013, 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['./PageCollectionView', 'jquery', 'underscore', 'react', 'react-dom', 'corsair_ship/ba-react-html5-dnd', 'ca-ui-toolkit', '../../util/ColorUtils', '../../../app/nls/StringResources', '../../widgets/PropertiesUtil', '../../../app/ui/dialogs/ConfirmationDialog', '../../../app/util/EventChainLocal', '../../../lib/@waca/core-client/js/core-client/utils/BidiUtil'], function (BaseLayout, $, _, React, ReactDOM, ReactHtml5DnDContext, UI_Toolkit, ColorUtils, StringResources, PropertiesUtil, ConfirmationDialog, EventChainLocal, BidiUtil) {
	/*global MutationObserver*/

	var linePositionMap = {
		top: 'bottom',
		left: 'right',
		bottom: 'top',
		right: 'left'
	};

	var colorPropertiesMapping = [{
		modelPropertyName: 'tabTextColor',
		toolkitPropertyName: 'textColor'
	}, {
		modelPropertyName: 'tabSelectedLineColor',
		toolkitPropertyName: 'lineColor'
	}, {
		modelPropertyName: 'tabBackgroundColor',
		toolkitPropertyName: 'backgroundColor'
	}, {
		modelPropertyName: 'tabIconColor',
		toolkitPropertyName: 'iconColor'
	}];

	var Tab = null;
	Tab = BaseLayout.extend({

		init: function init(options) {
			Tab.inherited('init', this, arguments);

			this.eventRouter = options.eventRouter;
			this.canvas = options.canvas;
			this.colorsService = this.dashboardApi.getFeature('Colors');
			this._icons = this.dashboardApi.getFeature('Icons');
			this._dashboardState = this.dashboardApi.getFeature('DashboardState');

			this._registerEvents();

			this.initialTab = this.model.items[0];
			if (options.appSettings && options.appSettings.subView) {
				_.each(this.model.items, function (item) {
					if (item.id === options.appSettings.subView) {
						this.initialTab = item;
					}
				}.bind(this));
			}
			this._setTabsVisibility();
			this._TabsWidget = null;

			Object.defineProperty(this, 'tabWidget', { get: function get() {
					return this._TabsWidget;
				} });
		},

		renderContent: function renderContent() {
			var _this2 = this;

			if (!this.rendered) {
				return Tab.inherited('renderContent', this, arguments).then(function () {
					_this2._renderTabs(_this2.initialTab.id);
					_this2.showView(_this2.initialTab);
					_this2.canvas.selectContent([_this2.initialTab.id]);
					_this2.rendered = true;
				});
			} else {
				return Promise.resolve(false);
			}
		},

		destroy: function destroy() {
			this._unregisterEvents();

			ReactDOM.unmountComponentAtNode(this.$el.find('.tabCntr')[0]);
			$('.tabLabel', this.$el).remove();
			Tab.inherited('destroy', this, arguments);
		},

		_registerEvents: function _registerEvents() {
			if (this.colorsService) {
				this.colorsService.on('theme:changed', this.applyTheme, this);
				this.colorsService.on('colorSet:changed', this.applyTheme, this);
			}
			if (this.model) {
				this.model.on('change:tabTextColor', this.applyTheme, this);
				this.model.on('change:tabSelectedLineColor', this.applyTheme, this);
				this.model.on('change:tabBackgroundColor', this.applyTheme, this);
				this.content.on('add:child', this.onTabAdded, this);
				this.content.on('remove:child', this.onTabRemoved, this);
				this.model.on('change:hideTab', this.updateHideTabState, this);
				this.model.on('change:fillColor', this.applyTheme, this);
				this.model.on('change:tabPosition', this.updateTabPosition, this);
				this.model.on('change:tabIconPosition', this.updateTabIconPosition, this);
			}
			if (this.eventRouter) {
				this.eventRouter.on('properties:hasRendered', this.setInitialEnabledState, this);
			}

			this.canvas.on('change:selections:select', this.onSelection, this);
			// TODO: We should modify dashboardstate/callbackinvoker to allow it accept context/'this'
			// so that each consumer doesn't have to maintain the bound function
			this._boundSetTabsVisibility = this._setTabsVisibility.bind(this);
			this._dashboardState.onUiStateChange(this._boundSetTabsVisibility);
		},

		_unregisterEvents: function _unregisterEvents() {
			if (this.colorsService) {
				this.colorsService.off('theme:changed', this.applyTheme, this);
				this.colorsService.off('colorSet:changed', this.applyTheme, this);
			}

			if (this.model) {
				this.model.off('change:tabTextColor', this.applyTheme, this);
				this.model.off('change:tabSelectedLineColor', this.applyTheme, this);
				this.model.off('change:tabBackgroundColor', this.applyTheme, this);
				this.content.off('add:child', this.onTabAdded, this);
				this.content.off('remove:child', this.onTabRemoved, this);
				this.model.off('change:hideTab', this.updateHideTabState, this);
				this.model.off('change:fillColor', this.applyTheme, this);
				this.model.off('change:tabPosition', this.updateTabPosition, this);
				this.model.off('change:tabIconPosition', this.updateTabIconPosition, this);
			}
			if (this.eventRouter) {
				this.eventRouter.off('properties:hasRendered', this.setInitialEnabledState, this);
			}

			this.canvas.off('change:selections:select', this.onSelection, this);
			this._dashboardState.offUiStateChange(this._boundSetTabsVisibility);
		},

		_getPanelId: function _getPanelId(id) {
			return id + '_tabpanel';
		},

		_getModelIdFromPanel: function _getModelIdFromPanel(id) {
			return id.slice(0, -9);
		},

		_getDefaultLinePostion: function _getDefaultLinePostion() {
			var tabPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'top';

			return linePositionMap[tabPosition];
		},

		_getDashboardColorProperties: function _getDashboardColorProperties() {
			var _this3 = this;

			var properties = {};

			colorPropertiesMapping.forEach(function (property) {
				_.extend(properties, _this3._getColorProperty(_this3.model, property));
			});

			return properties;
		},

		_getColorProperty: function _getColorProperty(model, property) {
			var name = property.modelPropertyName;
			var properties = {};
			var bgColorId = model.get('tabBackgroundColor') || model.get('fillColor');
			var themeColors = this.colorsService.getForegroundColorPropertiesForUIElement(bgColorId, 'tabs');

			var hexColor = null;
			if (property && model.get(name)) {
				hexColor = this.colorsService.getHexColorFromDashboardColorSet(model.get(name));
			}
			if (!hexColor && property.modelPropertyName === 'tabBackgroundColor') {
				hexColor = this.colorsService.getHexColorFromDashboardColorSet(bgColorId);
			}

			if (property && hexColor) {
				properties[property.toolkitPropertyName] = hexColor;
			} else if (property) {
				var themeColor = _.find(themeColors, function (color) {
					return color.id === name;
				});
				if (themeColor) {
					properties[property.toolkitPropertyName] = themeColor.value;
				}
			}

			return properties;
		},

		_getColorProperties: function _getColorProperties(model) {
			var _this4 = this;

			var colorProperties = this._getDashboardColorProperties();

			if (model) {
				var changedPageColorPropertyList = this._getChangedPageColorPropertyList(model);
				if (changedPageColorPropertyList.length > 0) {
					var containsTabBackgroundColor = function containsTabBackgroundColor(properties) {
						return properties.find(function (property) {
							return property.modelPropertyName === 'tabBackgroundColor';
						});
					};
					if (containsTabBackgroundColor(changedPageColorPropertyList)) {
						// The page level tab background is set.
						// This should affect the other properties if they are transparent.
						changedPageColorPropertyList = colorPropertiesMapping;
					}
					changedPageColorPropertyList.forEach(function (property) {
						var pageTabProperty = _this4._getColorProperty(model, property);
						_.extend(colorProperties, pageTabProperty);
					});
				}
				// Set the iconColor to the textColor if not defined
				if (!model.get('tabIconColor')) {
					colorProperties['iconColor'] = colorProperties['textColor'];
				}
			}

			this._setDeleteColors(colorProperties);

			return colorProperties;
		},

		_setDeleteColors: function _setDeleteColors(properties) {
			var backgroundColor = properties.backgroundColor;
			if (backgroundColor === 'transparent') {
				backgroundColor = this.colorsService.getValueForPropertyOfUIElement('board', 'backgroundColor');
			}
			if (backgroundColor) {
				properties.hoverColor = ColorUtils.invertColor(backgroundColor, 20, 100, true);
				properties.deleteBackgroundColor = ColorUtils.invertColor(backgroundColor, 40, 100, true);
				properties.deleteIconColor = properties.textColor;
			}
		},


		_createTabPanel: function _createTabPanel(pageModel, pageContent, tabColorProperties) {
			var _this5 = this;

			var TabPanel = UI_Toolkit.TabPanel;
			var _tabIconObj = pageModel.get('tabIcon');
			var tabIcon = _tabIconObj && _tabIconObj !== 'transparent' ? this._icons.getIcon(_tabIconObj).id : null;

			var properties = {
				id: this._getPanelId(pageModel.id),
				label: pageModel.get('title'),
				icon: tabIcon,
				keepTabContent: true,
				tooltipOrient: 'top'
			};

			_.extend(properties, tabColorProperties);

			return React.createElement(TabPanel, properties, [React.createElement('div', { ref: function ref(node) {
					if (node) {
						$(node).append(pageContent);
					} else {
						_this5.$el.find('.tabPageHolder').append(pageContent);
					}
				} })]);
		},

		_renderTabs: function _renderTabs(selectedId) {
			var _this6 = this;

			var Tabs = UI_Toolkit.Tabs;
			var panels = [],
			    panelsMirror = []; //Mirror entry of the tabs that we can compare with for tab changes.

			this.model.items.forEach(function (item) {
				var colorProperties = _this6._getColorProperties(item);
				var pageNode = _this6.$el.find('#' + item.id + '_tab');
				var tabPanel = _this6._createTabPanel(item, pageNode, colorProperties);
				panels.push(tabPanel);
				panelsMirror.push(tabPanel);
			});

			var tabPosition = this.model.get('tabPosition');
			var tabIconPosition = this.model.get('tabIconPosition');
			var _this = this;

			var TabsWidget = function (_React$Component) {
				_inherits(TabsWidget, _React$Component);

				function TabsWidget(props) {
					_classCallCheck(this, TabsWidget);

					var _this7 = _possibleConstructorReturn(this, _React$Component.call(this, props));

					_this7.state = {
						selectedTab: _this._getPanelId(selectedId),
						tabs: panels,
						editable: false,
						vertical: true,
						draggable: false,
						addable: false,
						deleteable: false,
						placement: tabPosition || 'top',
						linePosition: _this._getDefaultLinePostion(tabPosition),
						tabIconPosition: tabIconPosition
					};
					_this7._tabsMirror = panelsMirror;
					_this7._icons = _this._icons;
					_this7.tabListNode = null;
					_this7.toolBarElementsList = [];
					return _this7;
				}

				TabsWidget.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
					if (this._updatedTabs) {
						this._updatedTabs = false;
						if (this.state.tabs.length < this._tabsMirror.length) {
							//Delete
							_this.deleteView(_this._getModelIdFromPanel(_.difference(this._tabsMirror, this.state.tabs)[0].props.id));
						}
					}
					this._tabsMirror = this.state.tabs.slice();
					if (prevState.selectedTab !== this.state.selectedTab) {
						_this.showView(_this.model.findModel(_this._getModelIdFromPanel(this.state.selectedTab)));
					}
				};

				TabsWidget.prototype.componentDidMount = function componentDidMount() {
					var tabList = _this.$el.find('.ba-common-tabList');
					tabList.on('click.dbTab', _this._tabClick.bind(_this));
					tabList.on('keydown.dbTab', _this._tabKeydown.bind(_this));
					tabList.on('dblclick.dbTab', _this._tabDoubleClick.bind(_this));
					this.tabListNode = tabList;
				};

				TabsWidget.prototype.componentWillUnmount = function componentWillUnmount() {
					var tabList = _this.$el.find('.ba-common-tabList');
					tabList.off('click.dbTab');
					tabList.off('keydown.dbTab');
					tabList.off('dblckick.dbTab');
					this.tabListNode = null;
					this.hasUnmounted = true;
				};

				TabsWidget.prototype.updateTheme = function updateTheme() {
					var newTabs = [];
					for (var i = 0; i < this.state.tabs.length; i++) {
						var pageModel = _this.model.items[i];
						var colorProperties = _this._getColorProperties(pageModel);
						newTabs.push(React.cloneElement(this.state.tabs[i], colorProperties));
					}
					this.setState({ tabs: newTabs });
				};

				TabsWidget.prototype.editTabLabel = function editTabLabel(startEdit, model) {
					var _this8 = this;

					var isEditable = !!startEdit;
					var $node = void 0;
					if (this.tabListNode) {
						$node = $(this.tabListNode);
					} else {
						$node = _this.$el.find('.ba-common-tabList');
					}
					$node.find('[role=tab][aria-selected=true]').focus(); //HACK - Move the focus to the tab. If the focus happens to be on the label when editing is turned on, the re-render may happen before we try to focus.

					this.setState({ editable: isEditable }, function () {
						if (isEditable) {
							var label = $node.find('[contentEditable=true]');
							var panelId = _this._getPanelId(model.id);
							var originalLabel = void 0;
							var originalTab = _.find(_this8.state.tabs, function (panel) {
								return panelId === panel.props.id;
							});
							if (originalTab) {
								originalLabel = originalTab.props.label;
							}
							var observer = new MutationObserver(function () {
								//HACK HACK HACK HACK ------- Currently, on the first focus to the editable area, the toolkit tabs are re-rendering, thus blurring the focus immediately. The field needs to be found again and re-focused after the re-render (As there is a new label after this) to actually edit.
								if (!$.contains(_this.$el, label)) {
									observer.disconnect(); //The re-render has happened, so we no longer need this observer.
									label = $node.find('[contentEditable=true]');

									// TEMPORARY CODE - Replace when the tabs provide a callback when editing is complete
									label.on('blur.dashboardtabs', function () {
										label.off('blur.dashboardtabs');
										_this8.setState({ editable: false }, function () {
											var newTab = _.find(_this8.state.tabs, function (panel) {
												return panelId === panel.props.id;
											});
											if (newTab) {
												var newLabel = newTab.props.label;
												if (originalLabel !== newLabel) {
													_this.updateViewLabel(model, newLabel);
												}
											}
										});
									});

									label.focus();
								}
							});
							observer.observe(_this.$el[0], { childList: true, subtree: true }); //Observe changes in descendant nodes of the tabs to catch the re-render caused by the first focus.

							label.focus();
						}
					});
				};

				TabsWidget.prototype.updateTabLabel = function updateTabLabel(model) {
					var newTabs = [],
					    changeMade = false;
					var panelId = _this._getPanelId(model.id);
					for (var i = 0; i < this.state.tabs.length; i++) {
						var tab = this.state.tabs[i];
						if (tab.props.id == panelId && tab.props.label !== model.get('title')) {
							newTabs.push(React.cloneElement(tab, {
								label: model.get('title')
							}));
							changeMade = true;
						} else {
							newTabs.push(tab);
						}
					}
					if (changeMade) {
						this.setState({ tabs: newTabs });
					}
				};

				TabsWidget.prototype.updateTabIcon = function updateTabIcon(model) {
					var newTabs = [],
					    changeMade = false;
					var panelId = _this._getPanelId(model.id);
					for (var i = 0; i < this.state.tabs.length; i++) {
						var tab = this.state.tabs[i];
						var _tabIconObj = model.get('tabIcon');

						var icon = void 0;
						if (_tabIconObj && _tabIconObj !== 'transparent') {
							icon = this._icons.getIcon(_tabIconObj).id;
						} else {
							icon = null;
						}

						if (tab.props.id === panelId && tab.props.icon !== icon && !this.translationMode) {
							newTabs.push(React.cloneElement(tab, {
								icon: icon
							}));
							changeMade = true;
						} else {
							newTabs.push(tab);
						}
					}
					if (changeMade) {
						this.setState({ tabs: newTabs });
					}
				};

				/**
     * @param  {Object} model: the model of a view whose children element need to be translated
     * @param  {Boolean} shown: when it is true means we want to show the translate icon for this model.
     * @returns {Int} numberOfChanges: the number of tabs we've updated.
     */


				TabsWidget.prototype.updateTranslationIcon = function updateTranslationIcon(model, shown) {
					var icons = _this.dashboardApi.getFeature('Icons');
					this.translationMode = shown;
					var newTabs = [],
					    changeMade = false,
					    numberOfChanges = 0;
					var panelId = _this._getPanelId(model.id);
					for (var i = 0; i < this.state.tabs.length; i++) {
						var tab = this.state.tabs[i];
						if (tab.props.id == panelId) {
							if (shown) {
								newTabs.push(React.cloneElement(tab, {
									icon: icons.getIcon('warning').id,
									className: 'translateIcon'
								}));
								changeMade = true;
								numberOfChanges++;
							} else if (tab.props.icon) {
								var tabIcon = model.get('tabIcon');
								newTabs.push(React.cloneElement(tab, {
									icon: tabIcon ? tabIcon.name : undefined,
									className: undefined
								}));
								changeMade = true;
								numberOfChanges++;
							}
						} else {
							newTabs.push(tab);
						}
					}
					if (changeMade) {
						this.setState({ tabs: newTabs });
					}
					return numberOfChanges;
				};

				TabsWidget.prototype.render = function render() {
					var _this9 = this;

					var tabColorProperties = _this._getColorProperties();
					var tabs = this.state.tabs;
					tabs = tabs.map(function (tab) {
						return React.cloneElement(tab, {
							iconPosition: _this9.state.tabIconPosition
						});
					});
					_this._TabsWidget = this;
					return React.createElement('div', {
						className: 'ba-theme-default',
						style: {}
					}, [React.createElement(Tabs, {
						draggable: this.state.draggable,
						selected: this.state.selectedTab,
						stateTabs: this.state.tabs,
						editable: this.state.editable,
						deleteable: this.state.deleteable,
						addable: this.state.addable,
						textDir: BidiUtil.userPreferredTextDir,
						onChange: function onChange(tabId) {
							var newTabId = _this._getModelIdFromPanel(tabId);
							_this.canvas.selectContent([newTabId]);
						},
						setState: function setState(option) {
							_this9._updatedTabs = true;_this9.setState({ tabs: option });
						},
						onAddButtonClick: function onAddButtonClick() {
							return _this.onAddClick();
						},
						onReorder: function onReorder(newIndex, tabId) {
							_this.onReorder(tabs, newIndex, tabId);
						},
						scrollButtonsBackgroundColor: _this.colorsService.getLayoutBackgroundColorHex(_this.model.get('fillColor')),
						scrollButtonsTextColor: tabColorProperties.textColor,
						onDeletePrompt: _this.onDeletePrompt,
						placement: this.state.placement,
						linePosition: this.state.linePosition
					}, tabs)]);
				};

				return TabsWidget;
			}(React.Component);

			var DragEnabledTabsWidget = ReactHtml5DnDContext(TabsWidget);

			ReactDOM.render(React.createElement(DragEnabledTabsWidget), this.$el.find('.tabCntr')[0]);
		},

		/* Fetch the TabPane object given the TabList tab node.
   */
		_getPanelFromNode: function _getPanelFromNode(tabNode) {
			if (tabNode) {
				var tabIndex = this.$el.find('.ba-common-tabList [role=tab]').index(tabNode);
				if (tabIndex > -1) {
					return this._TabsWidget.state.tabs[tabIndex];
				}
			}
			return null;
		},

		/**
   * Fetch the model and tab node to send events from the overall tab control to the appropriate tab.
   * Returns undefined if the event doesn't map to a tab.
   */
		_getEventModelInfo: function _getEventModelInfo(event) {
			var _this10 = this;

			var result = undefined;

			var $target = $(event.target);
			var tabElement = $target.closest('[role=tab]')[0];
			var isClose = $target.is('svg.is-clickable') && $target.closest('span').hasClass('close');
			if (tabElement && !isClose) {
				var tabPanel = this._getPanelFromNode(tabElement);
				if (tabPanel) {
					var panelId = tabPanel.props.id;
					var isSelected = this._TabsWidget.state.selectedTab === panelId;
					var pageModel = this.model.findModel(this._getModelIdFromPanel(panelId));

					result = {
						selected: isSelected,
						node: tabElement,
						model: pageModel,
						editing: function editing() {
							return _this10._TabsWidget.state.editable;
						}
					};
				}
			}
			return result;
		},

		_tabClick: function _tabClick(event) {
			var _this11 = this;

			//this prevents the context bar from appearing when showing the tab toolbar
			var eventChainLocal = new EventChainLocal(event);
			eventChainLocal.setProperty('preventDefaultContextBar', true);

			var eventInfo = this._getEventModelInfo(event);
			if (eventInfo && eventInfo.selected && !eventInfo.editing()) {
				//This click could have triggered a tab delete. To avoid relying on additional internal information about the tabs, add a short delay and then check if the node is still in the DOM before trying to trigger the toolbar.
				setTimeout(function () {
					if ($(eventInfo.node).closest('.ba-common-tabList').length && !eventInfo.editing()) {
						_this11.showToolbar(eventInfo.model, eventInfo.node);
					}
				}, 10);
			}
		},

		_tabKeydown: function _tabKeydown(event) {
			var eventInfo = this._getEventModelInfo(event);
			if (eventInfo && eventInfo.selected) {
				this._handleKeydown(eventInfo.model, event, eventInfo.node);
			}
		},

		_tabDoubleClick: function _tabDoubleClick(event) {
			var _this12 = this;

			var eventInfo = this._getEventModelInfo(event);
			if (eventInfo && eventInfo.selected && !eventInfo.editing()) {
				//Mirror the toolbar show timeout to prevent the toolbar showing from immediately bluring the text field when edit starts. Additionally check that the delete button was not the target of the doubleclick.
				setTimeout(function () {
					if ($(eventInfo.node).closest('.ba-common-tabList').length) {
						_this12.editViewTitle(eventInfo.model);
					}
				}, 50);
			}
		},

		_attachView: function _attachView() /*model*/{
			//Overridden in authoring.
		},

		onAddClick: function onAddClick() {
			//Overrridden in authoring.
		},

		onReorder: function onReorder() /*tabsList, newIndex, tabId*/{
			//Overridden in authoring.
		},

		onDeletePrompt: function onDeletePrompt(deleteCalbackFn) {
			var dlg = new ConfirmationDialog('none', StringResources.get('tabDeleteDialogTitle'), StringResources.get('tabDeleteDialogMessage'));
			dlg.setDialogOptions({
				buttons: [{
					'text': StringResources.get('tabDeleteDialogNoButton'),
					'handler': dlg.cancel,
					'type': 'primary',
					'defaultId': 'no_button'
				}, {
					'text': StringResources.get('tabDeleteDialogYesButton'),
					'handler': dlg.ok,
					'type': 'secondary',
					'defaultId': 'yes_button'
				}]
			});
			dlg.confirm(deleteCalbackFn);
		},

		deleteView: function deleteView() /* sViewId */{
			//Overridden in authoring.
		},

		updateViewLabel: function updateViewLabel() /*pageModel, sText*/{
			//Overridden in authoring.
		},

		getSelectedSubViewId: function getSelectedSubViewId() {
			return this.selectedModel.id;
		},

		onSelection: function onSelection(event) {
			var _this13 = this;

			event.info.value.forEach(function (id) {
				var canvas = _this13.canvas;
				var content = canvas.getContent(id);
				if (content && content.getType() === 'page') {
					if (_this13.selectedModel && _this13.selectedModel.id !== id) {
						canvas.deselectContent([_this13.selectedModel.id]);
					}
					_this13._TabsWidget.setState({ selectedTab: _this13._getPanelId(id) });
				}
			});
		},

		getSelectedSubViewTitle: function getSelectedSubViewTitle() {
			return this.selectedModel.get('title');
		},

		showView: function showView(model) {
			var sTabId = this._getViewId(model);
			if (this._currentViewId === sTabId) {
				return;
			}

			if (this.selectedModel) {
				var layoutView = this.layoutController.getLayoutView(this.selectedModel.id);
				if (layoutView) {
					layoutView.onHide();
				}
			}

			this.$el.find('.pageTabContent.selected').removeClass('selected');
			$('#' + sTabId, this.$el).addClass('selected');

			this._currentViewId = sTabId;
			this.selectedModel = model;

			this._TabsWidget.setState({ selectedTab: this._getPanelId(this.selectedModel.id) });
			this.eventRouter.trigger('tab:tabChanged', { modelId: this.selectedModel.id });

			return this.layoutController.getLayoutViewWhenReady(this.selectedModel.id).then(function (layoutView) {
				layoutView.onShow();
				return this._invokeLifeCycleHandlers('tabs.onShow', {
					$el: this.$el,
					model: model
				}).then(function () {
					//default behavior goes in here.
				}.bind(this));
			}.bind(this));
		},

		_getLabelId: function _getLabelId(contentModel) {
			return contentModel.id + '_tablabel';
		},

		_handleKeydown: function _handleKeydown() /*model, event, node*/{},

		showToolbar: function showToolbar() /*model, node*/{
			//Overridden in authoring.
		},

		editViewTitle: function editViewTitle() /*model*/{
			//Overridden in authoring.
		},

		/**
   * Helper to delegate to this.showView
   * this double delegation is needed as this.showView may get overridden when authoring
   * When moving to author mode, event handlers using 'this.showView()' in _attachView() in consume view ctor
   * need to invoke the overridden showView()
   *
   * PL DO NOT REMOVE THIS FUNCTION
   */
		_showView: function _showView(model) {
			this.showView(model);
		},

		_getViewId: function _getViewId(contentModel) {
			return contentModel.id + '_tab';
		},

		_invokeLifeCycleHandlers: function _invokeLifeCycleHandlers(name, payload) {
			return this.dashboardApi.getDashboardSvc('.LifeCycleManager').then(function (LifeCycleManager) {
				return LifeCycleManager.invokeLifeCycleHandlers(name, payload);
			});
		},

		applyTheme: function applyTheme() {
			this._TabsWidget.updateTheme();
		},

		onTabAdded: function onTabAdded(payload) {
			var _this14 = this;

			this._updateHideTabProperty();
			var state = this.canvas.getContent(payload.info.newContentId).getFeature('state');
			return state.whenStatusChanges(state.STATUS.RENDERED).then(function () {
				_this14._TabsWidget.updateTheme();
				_this14.eventRouter.trigger('properties:refreshPane');
			});
		},

		onTabRemoved: function onTabRemoved() {
			this._updateHideTabProperty();
			this.eventRouter.trigger('properties:refreshPane');
		},

		_updateHideTabProperty: function _updateHideTabProperty() {
			var allowHidingMultipleTabs = this.content.getPropertyValue('allowHidingMultipleTabs');
			if (!allowHidingMultipleTabs) {
				var haveMultipleTabs = this.model.items.length > 1;
				this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'showTabsInPreview', enabled: !haveMultipleTabs });
				if (haveMultipleTabs) {
					this.content.setPropertyValue('showTabsInPreview', true);
				}
			}
		},

		updateHideTabState: function updateHideTabState() {
			var checked = !this.model.get('hideTab');
			this.eventRouter.trigger('properties:setValue', { propertyName: 'showTabsInPreview', value: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabPosition', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabIconPosition', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabTextColor', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabSelectedLineColor', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabBackgroundColor', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabRestoreDefaults', enabled: checked });
			this._setTabsVisibility();
		},

		updateTabPosition: function updateTabPosition(options) {
			if (this._TabsWidget && options) {
				var tabPosition = options.value || 'top';
				this._TabsWidget.setState({
					placement: tabPosition,
					linePosition: this._getDefaultLinePostion(tabPosition)
				});
				var updatePayload = {
					propertyName: 'tabPosition',
					value: tabPosition
				};
				this.eventRouter.trigger('properties:setValue', updatePayload);
			}
		},

		updateTabIconPosition: function updateTabIconPosition(options) {
			if (this._TabsWidget && options && options.value) {
				var tabIconPosition = options.value;
				this._TabsWidget.setState({
					tabIconPosition: tabIconPosition
				});
			}
		},

		setInitialEnabledState: function setInitialEnabledState() {
			var checked = !this.model.get('hideTab');
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabPosition', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabIconPosition', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabTextColor', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabSelectedLineColor', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabBackgroundColor', enabled: checked });
			this.eventRouter.trigger('properties:updateEnabled', { propertyName: 'tabRestoreDefaults', enabled: checked });
		},

		updateState: function updateState(state) {
			if (!this._TabsWidget.hasUnmounted) {
				//This is the case where in authouring mode and the user decide to close the dahsboard from the switcher

				//Should not be calling consume's view React set state here since the consumer view's destroy unmount the React component
				//Call setState will cause the error in the console:
				//Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
				//in TabsWidget (created by DragDropContext(TabsWidget))
				//in DragDropContext(TabsWidget)
				this._TabsWidget.setState(state);
			}
		},

		_onTabColorChange: function _onTabColorChange(propertyName, propertyValueInfo) {
			// get layout and update CSS
			var oLayout = this.model;
			var data = {
				undoRedoTransactionId: _.uniqueId('layout_' + propertyName + 'Changed_')
			};

			var payload = {};
			// Treat transparent as reset to default
			payload[propertyName] = propertyValueInfo.name == 'transparent' ? null : propertyValueInfo.name;
			this.colorsService.prepareForColorModelChange(payload, propertyName);

			oLayout.set(payload, {
				sender: this.senderId,
				payloadData: data
			});
		},

		_getChangedPageColorPropertyList: function _getChangedPageColorPropertyList(model) {
			return colorPropertiesMapping.filter(function (property) {
				return model.get(property.modelPropertyName);
			});
		},

		_setTabsVisibility: function _setTabsVisibility() {
			var hideTabs = !this.content.getPropertyValue('showTabsInPreview') && !this._dashboardState.getUiState().authoring;
			this.$el.toggleClass('tabsHidden', hideTabs);
		}
	});

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