/**
 * Sync settings script.
 *
 * @package northmill-online-shared
 */

jQuery( document ).ready(
	function ( $ ) {
		const selector_prefix          = northmill_online_shared_admin_settings.settings_id;
		const $sync_environment_select = $( '#' + selector_prefix + '_sync_env' );

		let $sync_settings = {
			prod: {},
			test: {},
			selectors: {
				prod: {},
				test: {}
			}
		};

		$sync_settings.selectors.prod.accounts = '.hub-account-prod';
		$sync_settings.prod.rows               = $( '.prod-row' );

		$sync_settings.selectors.test.accounts = '.hub-account-test';
		$sync_settings.test.rows               = $( '.test-row' );

		toggle_sync_settings();

		$sync_environment_select.on( 'change', toggle_sync_settings );

		$( '.add-hub-account' ).on( 'click', add_hub_account );
		$( document ).on( 'click', '.disconnect-backoffice-account', disconnect_backoffice_account );

		function toggle_sync_settings() {
			const sync_environment = $sync_environment_select.val();
			let $to_show           = [];
			let $to_hide           = [];

			let selectors_to_show = [];
			let selectors_to_hide = [];

			switch (sync_environment) {
				case 'prod':
					$to_show.push( $sync_settings.prod );
					$to_hide.push( $sync_settings.test );
					selectors_to_show.push( $sync_settings.selectors.prod );
					selectors_to_hide.push( $sync_settings.selectors.test );
					break;
				case 'test':
					$to_show.push( $sync_settings.test );
					$to_hide.push( $sync_settings.prod );
					selectors_to_show.push( $sync_settings.selectors.test );
					selectors_to_hide.push( $sync_settings.selectors.prod );
					break;
			}

			hide_and_show( $to_hide, $to_show, selectors_to_hide, selectors_to_show );
			toggle_hub_account_fields( sync_environment );
		}

		function add_hub_account( event ) {
			event.preventDefault();
			const $link = $( this );
			const $row  = $link.closest( '.add-account-row' );
			const env   = $link.data( 'env' );

			let $clone = $( '#hub-account-template' ).clone();

			$clone.removeAttr( 'id' );

			const current_iterator = northmill_online_shared_api_iterators[ env ]++;

			let api_urls = [];
			switch ( env ) {
				case 'prod':
					$clone.addClass( 'hub-account-prod' );
					$clone.find( '.th-title' ).text( northmill_online_shared_admin_settings.l10n.prod_title );
					api_urls = northmill_online_shared_admin_settings.api_urls.prod;
					break;

				case 'test':
					$clone.addClass( 'hub-account-test' );
					$clone.find( '.th-title' ).text( northmill_online_shared_admin_settings.l10n.test_title );
					api_urls = northmill_online_shared_admin_settings.api_urls.test;
					break;
			}

			// Add options to url select field.
			$.each(
				api_urls,
				function ( key, value ) {
					$clone.find( '.hub-account-url' ).append(
						$(
							'<option>',
							{
								value: value,
								text: value
							}
						)
					);
				}
			);

			const prefix = northmill_online_shared_admin_settings.hub_field_name_prefix + '[' + env + '][' + current_iterator + ']';

			$clone.find( '.hub-account-url' ).attr( 'name', prefix + '[api_url]' );
			$clone.find( '.hub-account-user' ).attr( 'name', prefix + '[api_user]' );
			$clone.find( '.hub-account-pass' ).attr( 'name', prefix + '[api_pass]' );
			$clone.find( '.hub-account-display_name' ).attr( 'name', prefix + '[api_display_name]' );
			$clone.find( '.hub-account-enabled' ).attr( 'name', prefix + '[enabled]' );
			$clone.find( '.hub-account-user-allowed-shipping-methods' ).attr( 'name', prefix + '[allowed_shipping_methods][]' );

			$clone.find( '.hub-account-url' ).attr( 'id', prefix + '[api_url]' );
			$clone.find( '.hub-account-user' ).attr( 'id', prefix + '[api_user]' );
			$clone.find( '.hub-account-pass' ).attr( 'id', prefix + '[api_pass]' );
			$clone.find( '.hub-account-display_name' ).attr( 'id', prefix + '[api_display_name]' );
			$clone.find( '.hub-account-enabled' ).attr( 'id', prefix + '[enabled]' );
			$clone.find( '.hub-account-user-allowed-shipping-methods' ).attr( 'id', prefix + '[allowed_shipping_methods][]' );

			$clone.find( '.hub-account-url' ).prop( 'required', 'true' );
			$clone.find( '.hub-account-user' ).prop( 'required', 'true' );
			$clone.find( '.hub-account-pass' ).prop( 'required', 'true' );
			$clone.find( '.hub-account-display_name' ).prop( 'required', 'true' );
			$clone.find( '.hub-account-user-allowed-shipping-methods' ).prop( 'required', 'true' );

			$clone.find( '.hub-account-url' ).prev().attr( 'for', prefix + '[api_url]' );
			$clone.find( '.hub-account-user' ).prev().attr( 'for', prefix + '[api_user]' );
			$clone.find( '.hub-account-pass' ).prev().attr( 'for', prefix + '[api_pass]' );
			$clone.find( '.hub-account-display_name' ).prev().attr( 'for', prefix + '[api_display_name]' );
			$clone.find( '.hub-account-enabled' ).prev().attr( 'for', prefix + '[enabled]' );
			$clone.find( '.hub-account-user-allowed-shipping-methods' ).prev().attr( 'for', prefix + '[allowed_shipping_methods][]' );

			$clone.find( '.disconnect-hub-account' ).data( 'env', env );
			$clone.find( '.disconnect-hub-account' ).attr( 'data-env', env );

			$clone.insertBefore( $row );

			toggle_hub_account_fields( env );
		}

		function disconnect_backoffice_account( event ) {
			event.preventDefault();
			const $link = $( this );
			const env   = $link.data( 'env' );
			const $row  = $link.closest( '.hub-account' );
			if ( 'yes' === $link.data( 'existing' ) ) {
				$row.find( 'input, select' ).attr( 'readonly', 'readonly' ).attr( 'name', '' ).attr( 'disabled', 'disabled' );
				$row.find( '.disconnected-text' ).show();
				$link.hide();
			} else {
				$row.remove();
			}

			toggle_hub_account_fields( env );
		}

		function toggle_hub_account_fields( env ) {
			if ( $( '.hub-account-' + env ).length > 1 ) {
				$( '.hub-account-' + env + ' .multi-account-field' ).show();
			} else {
				$( '.hub-account-' + env + ' .multi-account-field' ).hide();
			}
		}

		function hide_and_show( $to_hide, $to_show, selectors_to_hide, selectors_to_show ) {

			if ( 'undefined' !== typeof selectors_to_show && selectors_to_show.length ) {
				selectors_to_show.forEach(
					function (selector) {
						if ( 'string' === typeof selector ) {
							$to_show.push( $( selector ) );
						} else {
							$.each(
								selector,
								function (index, inner_selector) {
									$to_show.push( $( inner_selector ) );
								}
							);
						}
					}
				);
			}

			if ( 'undefined' !== typeof selectors_to_hide && selectors_to_hide.length ) {
				selectors_to_hide.forEach(
					function (selector) {
						if ( 'string' === typeof selector ) {
							$to_hide.push( $( selector ) );
						} else {
							$.each(
								selector,
								function (index, inner_selector) {
									$to_hide.push( $( inner_selector ) );
								}
							);
						}
					}
				);
			}

			if ( 'undefined' !== typeof $to_show && $to_show.length ) {
				$.each(
					$to_show,
					function (index, obj) {
						if (obj instanceof jQuery) {
							slide_elem( obj, 'down' );
						} else {
							$.each(
								obj,
								function (index, $elem) {
									slide_elem( $elem, 'down' );
								}
							);
						}
					}
				);
			}

			if ( 'undefined' !== typeof $to_hide && $to_hide.length ) {
				$.each(
					$to_hide,
					function (index, obj) {
						if (obj instanceof jQuery) {
							slide_elem( obj, 'up' );
						} else {
							$.each(
								obj,
								function (index, $elem) {
									slide_elem( $elem, 'up' );
								}
							);
						}
					}
				);
			}
		}

		function slide_elem(elem, direction) {
			if (elem instanceof jQuery) {
				if ('up' === direction) {
					elem.slideUp( 300 );
				} else {
					elem.slideDown( 300 );
				}
			}
		}
	}
);
