<?php

namespace DgoraWcas;

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class EmbeddingViaMenu {
	const SEARCH_PLACEHOLDER = 'dgwt_wcas_search_box';

	public function init() {

		if ( is_admin() ) {
			add_action( 'admin_head-nav-menus.php', array( $this, 'addNavMenuMetaBoxes' ) );
			add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'addNavMenuItemCustomFields' ), 10, 2 );
			add_action( 'wp_update_nav_menu_item', array( $this, 'updateNavMenuItem' ), 10, 3 );

			add_action( 'admin_head', array( $this, 'navMenuStyle' ) );
			add_action( 'admin_footer', array( $this, 'navMenuScripts' ) );

		} else {

			add_filter( 'walker_nav_menu_start_el', array( $this, 'processMenuItem' ), 50, 2 );
			add_filter( 'megamenu_walker_nav_menu_start_el', array( $this, 'processMenuItem' ), 50, 2 );

		}
	}

	/**
	 * Check if nav-menus screen is active
	 *
	 * @return bool
	 */
	private function isNavMenuScreen() {
		$isNav  = false;
		$screen = get_current_screen();

		if ( ! empty( $screen->id ) && ( $screen->id === 'nav-menus' ) ) {
			$isNav = true;
		}

		return $isNav;
	}

	/**
	 * Add custom nav meta box.
	 *
	 * Adapted from http://www.johnmorrisonline.com/how-to-add-a-fully-functional-custom-meta-box-to-wordpress-navigation-menus/.
	 *
	 * @return void
	 */
	public function addNavMenuMetaBoxes() {
		add_meta_box( 'dgwt_wcas_endpoints_nav_link', __( 'FiboSearch bar', 'ajax-search-for-woocommerce' ), array( $this, 'navMenuLinks' ), 'nav-menus', 'side',
			'low' );
	}

	/**
	 * Add custom fields to own menu item
	 */
	public function addNavMenuItemCustomFields( $item_id, $item ) {
		if ( $item->post_title !== self::SEARCH_PLACEHOLDER ) {
			return;
		}
		$layout = get_post_meta( $item_id, '_menu_item_dgwt_wcas_layout', true );
		if ( empty( $layout ) ) {
			$layout = 'default';
		}
		$searchIconColor = get_post_meta( $item_id, '_menu_item_dgwt_wcas_search_icon_color', true );
		?>
		<p class="description description-wide dgwt-wcas-description">
			<label for="edit-menu-item-dgwt-wcas-layout-<?php echo $item_id; ?>">
				<?php _e( 'Layout', 'ajax-search-for-woocommerce' ); ?>
				<select id="edit-menu-item-dgwt-wcas-layout-<?php echo $item_id; ?>" name="menu-item-dgwt-wcas-layout[<?php echo $item_id; ?>]" class="dgwt-wcas-layout-select">
					<?php
					foreach ( $this->getLayoutOptions() as $value => $name ) {
						$selected = selected( $value, $layout, false );
						printf( '<option %s value="%s">%s</option>', $selected, $value, $name );
					}
					?>
				</select>
			</label>
		</p>
		<p class="description description-wide dgwt-wcas-description">
			<?php _e( 'Search icon color', 'ajax-search-for-woocommerce' ); ?><br/>
			<input type="text" class="widefat wp-color-picker-field dwgt-wcas-color-picker"
				   name="menu-item-dgwt-wcas-search-icon-color[<?php echo $item_id; ?>]"
				   value="<?php echo esc_attr( $searchIconColor ); ?>"/>
		</p>
		<?php
	}

	/**
	 * Handle updates of custom fileds for own menu item
	 *
	 * @see wp_update_nav_menu_item()
	 */
	public function updateNavMenuItem( $menu_id, $menu_item_db_id, $args ) {
		if ( ! isset( $args['menu-item-title'] ) || $args['menu-item-title'] !== self::SEARCH_PLACEHOLDER ) {
			return;
		}

		$layout = isset( $_POST['menu-item-dgwt-wcas-layout'][ $menu_item_db_id ] ) ? $_POST['menu-item-dgwt-wcas-layout'][ $menu_item_db_id ] : '';
		update_post_meta( $menu_item_db_id, '_menu_item_dgwt_wcas_layout', $layout );

		$searchIconColor = isset( $_POST['menu-item-dgwt-wcas-search-icon-color'][ $menu_item_db_id ] ) ? $_POST['menu-item-dgwt-wcas-search-icon-color'][ $menu_item_db_id ] : '';
		update_post_meta( $menu_item_db_id, '_menu_item_dgwt_wcas_search_icon_color', $searchIconColor );
	}

	/**
	 * Modifies the menu item display on frontend.
	 *
	 * @param string $itemOutput
	 *
	 * @return string
	 */
	public function processMenuItem( $itemOutput, $item ) {

		if (
			! empty( $itemOutput )
			&& is_string( $itemOutput )
			&& strpos( $itemOutput, self::SEARCH_PLACEHOLDER ) !== false
		) {
			$args   = '';
			$style  = '';
			$layout = get_post_meta( $item->ID, '_menu_item_dgwt_wcas_layout', true );
			if ( in_array( $layout, array( 'classic', 'icon', 'icon-flexible' ) ) ) {
				$args .= 'layout="' . $layout . '" ';
			}
			$searchIconColor = get_post_meta( $item->ID, '_menu_item_dgwt_wcas_search_icon_color', true );
			if ( in_array( $layout, array( 'icon', 'icon-flexible' ) ) && ! empty( $searchIconColor ) ) {
				$args  .= 'class="dgwt-wcas-menu-item-' . $item->ID . ' " ';
				$style = sprintf( '<style>.dgwt-wcas-menu-item-%d .dgwt-wcas-ico-magnifier-handler path {fill: %s;}</style>', $item->ID, $searchIconColor );
			}
			$itemOutput = do_shortcode( sprintf( '[wcas-search-form %s]', $args ) ) . $style;
		}

		return $itemOutput;
	}

	/**
	 * Output menu links.
	 *
	 * @return void
	 */
	public function navMenuLinks() {
		?>
		<div id="posttype-dgwt-wcas-endpoints" class="posttypediv">
			<p><?php _e( 'Add FiboSearch as a menu item.', 'ajax-search-for-woocommerce' ) ?></p>
			<div id="tabs-panel-dgwt-wcas-endpoints" class="tabs-panel tabs-panel-active">
				<ul id="dgwt-wcas-endpoints-checklist" class="categorychecklist form-no-clear">
					<li>
						<label class="menu-item-title">
							<input type="checkbox" class="menu-item-checkbox" name="menu-item[-1][menu-item-object-id]"
							       value="-1"/> <?php echo __( 'FiboSearch bar', 'ajax-search-for-woocommerce' ); ?>
						</label>
						<input type="hidden" class="menu-item-type" name="menu-item[-1][menu-item-type]" value="custom"/>
						<input type="hidden" class="menu-item-title" name="menu-item[-1][menu-item-title]" value="<?php echo self::SEARCH_PLACEHOLDER; ?>"/>
						<input type="hidden" class="menu-item-classes" name="menu-item[-1][menu-item-classes]"/>
					</li>
				</ul>
			</div>
			<p class="button-controls">
                <span class="add-to-menu">
					<button type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to menu', 'woocommerce' ); ?>"
					        name="add-post-type-menu-item" id="submit-posttype-dgwt-wcas-endpoints"><?php esc_html_e( 'Add to menu', 'woocommerce' ); ?></button>
					<span class="spinner"></span>
				</span>
			</p>
		</div>
		<?php
	}

	public function getDescription() {
		$html = '<div class="dgwt-wcas-admin-menu-item-desc js-dgwt-wcas-admin-menu-item-desc">';
		$html .= '<img class="" src="' . DGWT_WCAS_URL . 'assets/img/logo-for-review.png" width="32" height="32" />';
		$html .= '<span>' . __( 'FiboSearch bar will be displayed here.', 'ajax-search-for-woocommerce' ) . '</span>';
		$html .= '</div>';

		return $html;
	}

	public function getLayoutOptions() {
		return array(
			'default'       => __( 'Default', 'ajax-search-for-woocommerce' ),
			'classic'       => __( 'Search bar only', 'ajax-search-for-woocommerce' ),
			'icon'          => __( 'Search icon', 'ajax-search-for-woocommerce' ),
			'icon-flexible' => __( 'Icon on mobile, search bar on desktop', 'ajax-search-for-woocommerce' ),
		);
	}

	public function navMenuStyle() {

		if ( ! $this->isNavMenuScreen() ) {
			return;
		}
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );

		?>
		<style>
			.dgwt-wcas-admin-menu-item-desc {
				display: flex;
				flex-direction: row;
				justify-content: left;
				align-items: center;
			}

			.dgwt-wcas-admin-menu-item-desc img {
				display: block;
				margin-right: 15px;
				border-radius: 4px;
			}

			.dgwt-wcas-description select {
				width: 100%;
			}
		</style>

		<?php

	}

	public function navMenuScripts() {

		if ( ! $this->isNavMenuScreen() ) {
			return;
		}

		?>
		<script>
			(function ($) {

				function replaceLabels($menuItem) {

					var $menuItems = $('#menu-to-edit .menu-item-title');

					if ($menuItems.length > 0) {

						$menuItems.each(function () {
							if ($(this).text() === '<?php echo self::SEARCH_PLACEHOLDER; ?>') {

								var $menuItem = $(this).closest('.menu-item');

								$menuItem.find('.menu-item-title').text('FiboSearch bar');
								$menuItem.find('.item-type').text('<?php _e( 'Search bar', 'ajax-search-for-woocommerce' ); ?>');
								$menuItem.find('.menu-item-settings .edit-menu-item-title').closest('label').hide();
								$menuItem.find('.field-url').hide();


								if ($menuItem.find('.js-dgwt-wcas-admin-menu-item-desc').length == 0) {
									$menuItem.find('.menu-item-settings').prepend('<?php echo $this->getDescription(); ?>');
								}
							}
						});
					}
				}

				function colorPickers() {
					var $colorPickers = $('.dwgt-wcas-color-picker');
					if ($colorPickers.length > 0) {
						$colorPickers.wpColorPicker();
					}
				}

				function toggleColorPicker(el) {
					var layout = el.val();
					if (layout === 'default' || layout === 'classic') {
						el.closest('.dgwt-wcas-description').next().slideUp();
					} else {
						el.closest('.dgwt-wcas-description').next().slideDown();
					}
				}

				function syncColorPickersWithSelects() {
					var layoutSelects = $('.dgwt-wcas-layout-select');
					if (layoutSelects.length > 0) {
						layoutSelects.each(function (i, el) {
							toggleColorPicker($(el));
						});
					}
				}

				$(document).ready(function () {

					replaceLabels();
					colorPickers()
					syncColorPickersWithSelects();

				});

				$(document).on('change', '.dgwt-wcas-layout-select', function (e) {
					toggleColorPicker($(this))
				});

				$(document).ajaxComplete(function (event, request, settings) {

					if (
						typeof settings != 'undefined'
						&& typeof settings.data == 'string'
						&& settings.data.indexOf('action=add-menu-item') !== -1
						&& settings.data.indexOf('dgwt_wcas_search_box') !== -1
					) {
						replaceLabels();
						colorPickers();
						syncColorPickersWithSelects();

						setTimeout(function () {
							replaceLabels();
							colorPickers();
							syncColorPickersWithSelects();
						}, 500)

					}

				});

			}(jQuery));
		</script>

		<?php

	}

}
