jQuery( document ).ready( function( $ ) {
	$( document ).on( 'keydown', function ( e ) {
		if ( e.keyCode === 27 && $( "#sl-ei-social-modal" ).css( 'display' ) != 'none' ) { // ESC
			$( "#sl-ei-social-modal" ).css( 'display', 'none' );
		}
	});

	$( '#sl-ei-social-edit, #sl-ei-social-edit-mobile' ).click( function( e ) {
		e.preventDefault();
		let data = JSON.parse( decodeURIComponent( $( this ).parent().find( '.sl-ei-social-attributes' ).val() ) );
		SLEImceIcons.menuSocial( document.getElementById( 'sl-ei-social-body' ), data, { hasC: true, hasPreview: true }, true );
		$( "#sl-ei-social-body" ).attr( 'social-helper-id', $( this ).attr( 'id' ) );
		$( "#sl-ei-social-modal" ).css( 'display', 'block' );
	});

	$( "#sl-ei-social-submit" ).click( function ( e ) {
		e.preventDefault();
		const att = SLEImceIcons.attSocial;
		const social = document.createElement( 'div' );
		SLEImceIcons.social( social, att, true );
		$( "#sl-ei-social-modal" ).css( 'display', 'none' );
		let container = $( '#' + $( "#sl-ei-social-body" ).attr( 'social-helper-id' ) ).parent();
		container.find( '.sl-ei-social-attributes' ).val( encodeURIComponent( JSON.stringify( att ) ) );
		let html = social.innerHTML;
		if ( att?.slbbFont && att?.slbbFont?.indexOf( ' ' ) !== -1 ) {
			const regex = new RegExp( `&quot;\s*${ att.slbbFont.replaceAll( "'", '' ) }\s*&quot;` );
			html = html.replace( regex, att.slbbFont.replaceAll( "'", '' ) );
		}
		container.find( '.sl-ei-social-icon-container' ).html( html.replaceAll( '<a', '<div').replaceAll( '</a', '</div') );
		container.find( '.sl-ei-social-code' ).val( html );
	});

	$( "#sl-ei-social-cancel" ).click( function ( e ) {
		e.preventDefault();
		$( "#sl-ei-social-modal" ).css( 'display', 'none' );
	});

	$( '#display_on_post, #display_on_page, #display_on_front, #display_on_search, #display_on_archive, #display_on_woo' ).change( function() {
		placeDisableChange();
	});

	$( '.sl-ei-exclude-list-id' ).change( function() {
		setCheckListValue( this, '#exclude_IDs_value' );
	});

	$( '#exclude_IDs' ).change( function() {
		excludeDisableChange();
	});

	$( '#enable_social' ).change( function() {
		$( "#sl-ei-social-edit" ).prop( 'disabled', ! this.checked );
		$( "#hide_on_mobile" ).prop( 'disabled', ! this.checked );
		$( "#special_on_mobile" ).prop( 'disabled', ! ( $( '#enable_social' ).is( ':checked' ) && ! $( '#hide_on_mobile' ).is( ':checked' ) ) );
		$( "#s_title" ).prop( 'disabled', ! this.checked );
		mobileDisableChange();
		displayDisableChange();
		placeDisableChange();
		excludeDisableChange();
	});

	$( '#special_on_mobile' ).change( function() {
		mobileDisableChange();
	});

	$( '#hide_on_mobile' ).change( function() {
		$( "#special_on_mobile" ).prop( 'disabled', ! ( $( '#enable_social' ).is( ':checked' ) && ! $( '#hide_on_mobile' ).is( ':checked' ) ) );
		mobileDisableChange();
	});

	//initial
	showHideElement( '#sl-ei-social-icon-box', $( '#special_on_mobile' ).is( ':checked' ), 300 );
	$( "#sl-ei-social-edit" ).prop( 'disabled', ! $( '#enable_social' ).is( ':checked' ) );
	$( "#hide_on_mobile" ).prop( 'disabled', ! $( '#enable_social' ).is( ':checked' ) );
	$( "#special_on_mobile" ).prop( 'disabled', ! ( $( '#enable_social' ).is( ':checked' ) && ! $( '#hide_on_mobile' ).is( ':checked' ) ) );
	$( "#s_title" ).prop( 'disabled', ! $( '#enable_social' ).is( ':checked' ) );
	mobileDisableChange();
	displayDisableChange();
	placeDisableChange();
	excludeDisableChange();

	function mobileDisableChange() {
		let key = $( '#special_on_mobile' ).is( ':checked' ) && $( '#enable_social' ).is( ':checked' ) && ! $( '#hide_on_mobile' ).is( ':checked' );
		$( "#s_title_mobile" ).prop( 'disabled', ! key );
		$( "#sl-ei-social-edit-mobile" ).prop( 'disabled', ! key );
		showHideElement( '#sl-ei-social-icon-box', key, 300 );
	}

	function displayDisableChange() {
		let key = $( '#enable_social' ).is( ':checked' );
		$( "#display_on_post" ).prop( 'disabled', ! key );
		$( "#display_on_page" ).prop( 'disabled', ! key );
		$( "#display_on_front" ).prop( 'disabled', ! key );
		$( "#display_on_search" ).prop( 'disabled', ! key );
		$( "#display_on_archive" ).prop( 'disabled', ! key );
		$( "#display_on_woo" ).prop( 'disabled', ! key );
		$( "#exclude_IDs" ).prop( 'disabled', ! key );
	}

	function placeDisableChange() {
		let key = $( '#enable_social' ).is( ':checked' );
		$( "#display_on_post_place" ).prop( 'disabled', ! ( $( '#display_on_post' ).is( ':checked' ) && key ) );
		$( "#display_on_page_place" ).prop( 'disabled', ! ( $( '#display_on_page' ).is( ':checked' ) && key ) );
		$( "#display_on_front_place" ).prop( 'disabled', ! ( $( '#display_on_front' ).is( ':checked' ) && key ) );
		$( "#display_on_search_place" ).prop( 'disabled', ! ( $( '#display_on_search' ).is( ':checked' ) && key ) );
		$( "#display_on_archive_place" ).prop( 'disabled', ! ( $( '#display_on_archive' ).is( ':checked' ) && key ) );
		$( "#display_on_woo_place" ).prop( 'disabled', ! ( $( '#display_on_woo' ).is( ':checked' ) && key ) );
	}

	function excludeDisableChange() {
		let key = ! ( $( '#exclude_IDs' ).is( ':checked' ) && $( '#enable_social' ).is( ':checked' ) );
		$( ".sl-ei-exclude-list-id" ).prop( 'disabled', key );
		if ( key ) {
			$( ".sl-ei-exclude-social-select label" ).addClass( 'disabled' );
		} else {
			$( ".sl-ei-exclude-social-select label" ).removeClass( 'disabled' );
		}
	}

	function setCheckListValue( el, id ) {
		var els = el.parentNode.querySelectorAll( "[type='checkbox']" ),
			arr = [];
		for ( var j = 0; j < els.length; j++ ) {
			if ( els[j].checked ) {
				arr.push( els[j].value );
				els[j].nextSibling.classList.add( 'sl-ei-list-selected' );
			} else {
				els[j].nextSibling.classList.remove( 'sl-ei-list-selected' );
			}
		}
		$( id ).val( arr.join() );
	}

	function showHideElement( id, key , time ) {
		if ( key ) {
			$( id ).slideDown( time );
		} else {
			$( id ).slideUp( time );
		}
	}
});