/* global aamoLayoutData, jQuery */
( function ( $ ) {
	'use strict';

	var cfg = ( typeof aamoLayoutData !== 'undefined' ) ? aamoLayoutData : {};

	function collectFields() {
		var fields = {};
		$( '[data-layout-field]' ).each( function () {
			var $el   = $( this );
			var field = $el.data( 'layout-field' );
			if ( $el.is( ':checkbox' ) ) {
				fields[ field ] = $el.is( ':checked' ) ? '1' : '0';
			} else if ( $el.is( ':radio' ) ) {
				if ( $el.is( ':checked' ) ) {
					fields[ field ] = $el.val();
				}
			} else {
				fields[ field ] = $el.val();
			}
		} );
		return fields;
	}

	function showStatus( msg, isError ) {
		var $s = $( '#aamo-layout-status' );
		$s.text( msg )
		  .css( 'color', isError ? '#d63638' : '#00a32a' );
	}

	$( document ).ready( function () {

		// Color picker for content background
		if ( $.fn.wpColorPicker ) {
			$( '.aamo-layout-color-input' ).wpColorPicker();
		}

		// Sidebar style radio — show/hide pill radius input
		$( '.aamo-sidebar-style-radio' ).on( 'change', function () {
			if ( 'pill' === $( this ).val() ) {
				$( '#aamo-pill-radius-row' ).show();
			} else {
				$( '#aamo-pill-radius-row' ).hide();
			}
		} );

		// Font source radio — show/hide custom font fields
		$( '.aamo-font-source-radio' ).on( 'change', function () {
			if ( 'custom' === $( this ).val() ) {
				$( '#aamo-custom-font-fields' ).show();
			} else {
				$( '#aamo-custom-font-fields' ).hide();
			}
		} );

		// Card shadow checkbox — show/hide slider options
		$( '#aamo-card-shadow' ).on( 'change', function () {
			$( '#aamo-shadow-options' ).toggle( $( this ).is( ':checked' ) );
		} );

		// Shadow sliders — live value readout
		$( document ).on( 'input', '.aamo-slider', function () {
			var $input = $( this );
			var unit   = $input.data( 'layout-field' ).indexOf( 'opacity' ) >= 0 ? '%' : 'px';
			$input.next( '.aamo-slider-value' ).text( $input.val() + unit );
		} );

		// Save
		$( '#aamo-layout-save' ).on( 'click', function () {
			var $btn = $( this );
			$btn.prop( 'disabled', true );
			showStatus( cfg.i18n.saving, false );

			var fields   = collectFields();
			var postData = $.extend( {}, fields, {
				action  : cfg.actionSave,
				nonce   : cfg.nonceSave,
				enabled : '1',
			} );

			$.post( cfg.ajaxUrl, postData )
				.done( function ( resp ) {
					if ( resp.success ) {
						showStatus( resp.data.message || cfg.i18n.saved, false );
						setTimeout( function () { window.location.reload(); }, 800 );
					} else {
						showStatus( ( resp.data && resp.data.message ) || cfg.i18n.error, true );
						$btn.prop( 'disabled', false );
					}
				} )
				.fail( function () {
					showStatus( cfg.i18n.error, true );
					$btn.prop( 'disabled', false );
				} );
		} );

		// Reset
		$( '#aamo-layout-reset' ).on( 'click', function () {
			if ( ! window.confirm( cfg.i18n.confirm ) ) {
				return;
			}
			var $btn = $( this );
			$btn.prop( 'disabled', true );
			showStatus( cfg.i18n.resetting, false );

			$.post( cfg.ajaxUrl, {
				action : cfg.actionReset,
				nonce  : cfg.nonceReset,
			} )
				.done( function ( resp ) {
					if ( resp.success ) {
						window.location.reload();
					} else {
						showStatus( ( resp.data && resp.data.message ) || cfg.i18n.error, true );
						$btn.prop( 'disabled', false );
					}
				} )
				.fail( function () {
					showStatus( cfg.i18n.error, true );
					$btn.prop( 'disabled', false );
				} );
		} );

	} );
} )( jQuery );
