import { addFilter } from '@wordpress/hooks';

// live reload
addFilter(
	'vpf.editor.changed-attributes',
	'vpf/editor/changed-attributes/live-reload',
	( data ) => {
		if ( ! data.$framePortfolio ) {
			return data;
		}

		let reload = false;

		Object.keys( data.attributes ).forEach( ( name ) => {
			const val = data.attributes[ name ];

			switch ( name ) {
				case 'tiles_type':
				case 'masonry_columns':
				case 'masonry_images_aspect_ratio':
				case 'grid_columns':
				case 'grid_images_aspect_ratio':
				case 'justified_row_height':
				case 'justified_row_height_tolerance':
				case 'justified_max_rows_count':
				case 'justified_last_row':
				case 'slider_effect':
				case 'slider_speed':
				case 'slider_autoplay':
				case 'slider_autoplay_hover_pause':
				case 'slider_centered_slides':
				case 'slider_loop':
				case 'slider_free_mode':
				case 'slider_free_mode_sticky':
				case 'slider_bullets_dynamic':
				case 'items_gap':
				case 'items_gap_vertical': {
					data.$framePortfolio.attr(
						`data-vp-${ name.replace( /_/g, '-' ) }`,
						val
					);
					data.$framePortfolio.vpf( 'init' );

					break;
				}
				case 'items_style_default__align':
				case 'items_style_fade__align':
				case 'items_style_fly__align':
				case 'items_style_emerge__align': {
					let allAlignClasses = '';

					[
						'left',
						'center',
						'right',
						'top-left',
						'top-center',
						'top-right',
						'bottom-left',
						'bottom-center',
						'bottom-right',
					].forEach( ( alignName ) => {
						allAlignClasses += `${
							allAlignClasses ? ' ' : ''
						}vp-portfolio__item-align-${ alignName }`;
					} );

					data.$framePortfolio
						.find( '.vp-portfolio__item-overlay' )
						.removeClass( allAlignClasses )
						.addClass( `vp-portfolio__item-align-${ val }` );

					break;
				}
				case 'items_style_default__caption_text_align':
				case 'items_style_fade__caption_text_align':
				case 'items_style_fly__caption_text_align':
				case 'items_style_emerge__caption_text_align': {
					let allAlignClasses = '';

					[
						'left',
						'center',
						'right',
						'top-left',
						'top-center',
						'top-right',
						'bottom-left',
						'bottom-center',
						'bottom-right',
					].forEach( ( alignName ) => {
						allAlignClasses += `${
							allAlignClasses ? ' ' : ''
						}vp-portfolio__item-caption-text-align-${ alignName }`;
					} );

					data.$framePortfolio
						.find( '.vp-portfolio__item-caption' )
						.removeClass( allAlignClasses )
						.addClass(
							`vp-portfolio__item-caption-text-align-${ val }`
						);

					break;
				}
				case 'items_style_default__overlay_text_align':
				case 'items_style_fade__overlay_text_align':
				case 'items_style_fly__overlay_text_align':
				case 'items_style_emerge__overlay_text_align': {
					let allAlignClasses = '';

					[
						'left',
						'center',
						'right',
						'top-left',
						'top-center',
						'top-right',
						'bottom-left',
						'bottom-center',
						'bottom-right',
					].forEach( ( alignName ) => {
						allAlignClasses += `${
							allAlignClasses ? ' ' : ''
						}vp-portfolio__item-overlay-text-align-${ alignName }`;
					} );

					data.$framePortfolio
						.find( '.vp-portfolio__item-overlay' )
						.removeClass( allAlignClasses )
						.addClass(
							`vp-portfolio__item-overlay-text-align-${ val }`
						);

					break;
				}
				// prevent some options reload
				case 'list_name':
					// no reload
					break;
				default:
					reload = reload || data.reload;
					break;
			}
		} );

		return {
			...data,
			reload,
		};
	}
);
