/**
 * Handles tabbed interfaces within Envira:
 * - Settings Screen
 * - Add/Edit Screen: Native/External
 * - Add/Edit Screen: Configuration Tabs
 */ (function($) {
	$(function() {
		// Define some general vars
		var envira_tabs_nav = '.envira-tabs-nav', // Container of tab navigation items (typically an unordered list)
			envira_tabs_hash = window.location.hash,
			envira_tabs_current_tab = window.location.hash.replace('!', ''),
			envira_css_editor = null;

		if (wp.codeEditor !== undefined) {
			var editorSettings = wp.codeEditor.defaultSettings
				? _.clone(wp.codeEditor.defaultSettings)
				: {};
			editorSettings.codemirror = _.extend(
				{},
				editorSettings.codemirror,
				{
					indentUnit: 2,
					tabSize: 2,
					mode: 'css',
				},
			);
		}

		// If the URL contains a hash beginning with envira-tab, mark that tab as open
		// and display that tab's panel.
		if (
			envira_tabs_hash &&
			envira_tabs_hash.indexOf('envira-tab-') >= 0
		) {
			// Find the tab panel that the tab corresponds to
			var envira_tabs_section = $(envira_tabs_current_tab).parent(),
				envira_tab_nav = $(envira_tabs_section).data('navigation');

			// Remove the active class from everything in this tab navigation and section
			$(envira_tab_nav)
				.find('.envira-active')
				.removeClass('envira-active');
			$(envira_tabs_section)
				.find('.envira-active')
				.removeClass('envira-active');

			// Add the active class to the chosen tab and section
			$(envira_tab_nav)
				.find('a[href="' + envira_tabs_current_tab + '"]')
				.addClass('envira-active');
			$(envira_tabs_current_tab).addClass('envira-active');

			// Update the form action to contain the selected tab as a hash in the URL
			// This means when the user saves their Gallery, they'll see the last selected
			// tab 'open' on reload
			var envira_post_action = $('#post').attr('action');
			if (envira_post_action) {
				// Remove any existing hash from the post action
				envira_post_action = envira_post_action.split('#')[0];

				// Append the selected tab as a hash to the post action
				$('#post').attr(
					'action',
					envira_post_action + window.location.hash,
				);
			}

			if (
				$(envira_tabs_current_tab).find(
					'#envira-config-custom-css-test',
				).length > 0 &&
				envira_css_editor === null
			) {
				envira_css_editor = wp.codeEditor.initialize(
					$('#envira-config-custom-css-test'),
					editorSettings,
				);
			}
		}

		// Change tabs on click.
		// Tabs should be clickable elements, such as an anchor or label.
		$(envira_tabs_nav).on('click', '.nav-tab, a', function(e) {
			// Prevent the default action
			e.preventDefault();

			// Destroy all instances of Envira Video iframes
			// $( 'div.envira-video-help' ).remove();
			// Get the clicked element and the nav tabs
			var envira_tabs = $(this).closest(envira_tabs_nav),
				envira_tabs_section = $(envira_tabs).data('container'),
				envira_tabs_update_hashbang = $(envira_tabs).data(
					'update-hashbang',
				),
				envira_tab =
					typeof $(this).attr('href') !== 'undefined'
						? $(this).attr('href')
						: $(this).data('tab');

			// Don't do anything if we're clicking the already active tab.
			if ($(this).hasClass('envira-active')) {
				return;
			}

			// If the tab that was clicked is a label, check its corresponding input element, if it isn't already checked
			if (typeof $(this).attr('for') !== 'undefined') {
				if (!$('input#' + $(this).attr('for')).prop('checked')) {
					$('input#' + $(this).attr('for'))
						.prop('checked', true)
						.trigger('change');
				}
			}

			// Remove the active class from everything in this tab navigation and section
			$(envira_tabs)
				.find('.envira-active')
				.removeClass('envira-active');
			$(envira_tabs_section)
				.find('.envira-active')
				.removeClass('envira-active');

			// Add the active class to the chosen tab and section
			$(this).addClass('envira-active');
			$(envira_tabs_section)
				.find(envira_tab)
				.addClass('envira-active');

			// Update the window URL to contain the selected tab as a hash in the URL.
			if (envira_tabs_update_hashbang == '1') {
				window.location.hash = envira_tab.split('#').join('#!');

				// Update the form action to contain the selected tab as a hash in the URL
				// This means when the user saves their Gallery, they'll see the last selected
				// tab 'open' on reload
				var envira_post_action = $('#post').attr('action');
				if (envira_post_action) {
					// Remove any existing hash from the post action
					envira_post_action = envira_post_action.split('#')[0];

					// Append the selected tab as a hash to the post action
					$('#post').attr(
						'action',
						envira_post_action + window.location.hash,
					);
				}
			}

			if (
				$(envira_tabs_section)
					.find(envira_tab)
					.find('#envira-config-custom-css-test').length > 0 &&
				envira_css_editor === null
			) {
				envira_css_editor = wp.codeEditor.initialize(
					$('#envira-config-custom-css-test'),
					editorSettings,
				);
			}
		});
	});
})(jQuery);