import { hexToHSL } from '../util';

const $ = jQuery;

export default () => {
	let selectedDesignStyle = GoPreviewData.selectedDesignStyle;

	/**
	 * Set color
	 *
	 * @param {*} color
	 * @param {*} cssVar
	 */
	const setColor = ( color, cssVar ) => {
		const hsl = hexToHSL( color );
		document.querySelector( ':root' ).style.setProperty( `${ cssVar }`, `hsl(${ hsl[ 0 ] }, ${ hsl[ 1 ] }%, ${ hsl[ 2 ] }%)` );
	};

	/**
	 * Load the color schemes for the selected design style.
	 *
	 * @param {*} colorScheme
	 */
	const loadColorSchemes = ( colorScheme ) => {
		const designStyle = getDesignStyle( selectedDesignStyle );
		colorScheme = colorScheme.replace( `${ selectedDesignStyle }-`, '' );

		if ( 'undefined' !== typeof designStyle.color_schemes[ colorScheme ] && 'undefined' !== typeof wp.customize.settings.controls ) {
			const colors = designStyle.color_schemes[ colorScheme ];
			toggleColorSchemes();

			setTimeout( function() {
				updateViewportBasis( designStyle );
			}, 200 );

			Object.entries( wp.customize.settings.controls )
				// eslint-disable-next-line no-unused-vars
				.filter( ( [ _control, config ] ) => config.type === 'color' )
				.forEach( ( [ customizerControl, config ] ) => {
					const customizerSetting = wp.customize( config.settings.default );
					const color = colors[ config.settings.default.replace( '_color', '' ) ] || '';

					customizerSetting.set( color );

					wp.customize.control( customizerControl ).container.find( '.color-picker-hex' )
						.data( 'data-default-color', color )
						.wpColorPicker( 'defaultColor', color )
						.trigger( 'change' );
				} );
		}
	};

	/**
	 * Control the visibility of the color schemes selections.
	 */
	const toggleColorSchemes = () => {
		$( 'label[for^=color_scheme_control]' ).hide();
		$( `label[for^=color_scheme_control-${ selectedDesignStyle }-]` ).show();
	};

	/**
	 * Update the viewport basis for the selected design style.
	 *
	 * @param {*} designStyle
	 */
	const updateViewportBasis = ( designStyle ) => {
		const viewportBasis = ( 'undefined' !== typeof designStyle.viewport_basis ) ? designStyle.viewport_basis : '950';
		wp.customize.control( 'viewport_basis' ).setting( viewportBasis );
	};

	/**
	 * Returns the design style array
	 *
	 * @param {*} designStyle
	 */
	const getDesignStyle = ( designStyle ) => {
		if (
			'undefined' !== typeof GoPreviewData.design_styles &&
			'undefined' !== GoPreviewData.design_styles[ designStyle ]
		) {
			return GoPreviewData.design_styles[ designStyle ];
		}

		return false;
	};

	wp.customize.bind( 'ready', () => toggleColorSchemes() );

	wp.customize( 'design_style', ( value ) => {
		selectedDesignStyle = value.get();
		value.bind( ( to ) => {
			selectedDesignStyle = to;
			loadColorSchemes( 'one' );
			$( `#color_scheme_control-${ selectedDesignStyle }-one` ).prop( 'checked', true );
		} );
	} );

	wp.customize( 'color_scheme', ( value ) => {
		value.bind( ( colorScheme ) => loadColorSchemes( colorScheme ) );
	} );

	wp.customize( 'background_color', ( value ) => {
		value.bind( ( to ) => setColor( to, '--go--color--background' ) );
	} );

	wp.customize( 'primary_color', ( value ) => {
		value.bind( ( to ) => setColor( to, '--go--color--primary' ) );
	} );

	wp.customize( 'secondary_color', ( value ) => {
		value.bind( ( to ) => setColor( to, '--go--color--secondary' ) );
	} );

	wp.customize( 'tertiary_color', ( value ) => {
		value.bind( ( to ) => setColor( to, '--go--color--tertiary' ) );
	} );
};
