<?php

if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly.
}
class MobileMenuOptionUpload extends MobileMenuOption {

	private static $firstLoad = true;

	public $defaultSecondarySettings = array(
		'size' => 'full', // The size of the image to use in the generated CSS.
		'placeholder' => '', // Show this when blank.
	);


	/**
	 * Constructor.
	 *
	 * @return	void
	 * @since	1.5
	 */
	function __construct( $settings, $owner ) {
		parent::__construct( $settings, $owner );

		add_filter( 'mm_generate_css_upload_mobmenu' , array( $this, 'generateCSS' ), 10, 2 );
		add_filter( 'upload_mimes', array( $this, 'allow_svg_uploads' ) );

		add_action( 'mm_livepreview_pre_mobmenu' , array( $this, 'preLivePreview' ), 10, 3 );
		add_action( 'mm_livepreview_post_mobmenu', array( $this, 'postLivePreview' ), 10, 3 );
		}


		/**
		* Allow SVG mime types to be uploaded to WP.
		*
		* @since 2.9
		*
		* @param array $mimes The allowed mime types.
		*
		* @return array $mimes The modified mime types.
		*/
		public function allow_svg_uploads( $mimes ) {
				$mimes['svg'] = 'image/svg+xml';
				return apply_filters( 'pbs_allow_svg_uploads', $mimes );
		}


	/**
	 * Generates CSS for the font, this is used in MobileMenuCSS
	 *
	 * @param	string               $css The CSS generated
	 * @param	MobileMenuOption $option The current option being processed.
	 * @return	string The CSS generated
	 * @since	1.5
	 */
	public function generateCSS( $css, $option ) {
		if ( $this->settings['id'] != $option->settings['id'] ) {
			return $css;
		}

		$value = $this->getValue();

		if ( empty( $value ) ) {
			return $css;
		}

		if ( is_numeric( $value ) ) {
			$size = ! empty( $option->settings['size'] ) ? $option->settings['size'] : 'thumbnail';
			$attachment = wp_get_attachment_image_src( $value, $size );
			$value = $attachment[0];
		}

		$css .= '$' . $option->settings['id'] . ': url(' . $value . ');';

		if ( ! empty( $option->settings['css'] ) ) {
			// In the css parameter, we accept the term `value` as our current value,
			// translate it into the SaSS variable for the current option.
			$css .= str_replace( 'value', '#{$' . $option->settings['id'] . '}', $option->settings['css'] );
		}

		return $css;
	}


	/**
	 * The upload option gives out an attachment ID. Live previews will not work since we cannot get
	 * the upload URL from an ID easily. Use a specially created Ajax Handler for just getting the URL.
	 *
	 * @since 1.9
	 *
	 * @see tf_upload_option_customizer_get_value()
	 */
	public function preLivePreview( $optionID, $optionType, $option ) {
		if ( $optionID != $this->settings['id'] ) {
			return;
		}

		$nonce = wp_create_nonce( 'tf_upload_option_nonce' );
		$size = ! empty( $this->settings['size'] ) ? $this->settings['size'] : 'thumbnail';

		?>
		wp.ajax.send( 'tf_upload_option_customizer_get_value', {
		    data: {
				nonce: '<?php echo esc_attr( $nonce ) ?>',
				size: '<?php echo esc_attr( $size ) ?>',
				id: value
		    },
		    success: function( data ) {
				var $ = jQuery;
				var value = data;
		<?php
	}


	/**
	 * Closes the Javascript code created in preLivePreview().
	 *
	 * @since 1.9
	 *
	 * @see preLivePreview()
	 */
	public function postLivePreview( $optionID, $optionType, $option ) {
		if ( $optionID != $this->settings['id'] ) {
			return;
		}

		// Close the ajax call.
		?>
			}
		  });
		<?php
	}

	/*
	 * Display for options and meta.
	 */
	public function display() {
		self::createUploaderScript();

		$this->echoOptionHeader();

		// Display the preview image.
		$value = $this->getValue();

		if ( is_numeric( $value ) ) {
			// Gives us an array with the first element as the src or false on fail.
			$value = wp_get_attachment_image_src( $value, array( 150, 150 ) );
		}

		if ( !$value ) {
			$value = "";
		} else {
			if ( ! is_array( $value ) ) {
				$value = $this->getValue();
				if ( $value == 'menu' ) {
					$value = '';
				}
			} else {
				$value = $value[0];
			}
		}

		$previewImage = '';
		if ( ! empty( $value ) ) {
			$previewImage = "<i class='dashicons dashicons-no-alt remove'></i><img src='" . esc_url( $value ) . "' style='display: none'/>";
		}
		echo "<div class='thumbnail mm-image-preview'>" . $previewImage . '</div>';

		printf('<input name="%s" placeholder="%s" id="%s" type="hidden" value="%s" />',
			$this->getID(),
			$this->settings['placeholder'],
			$this->getID(),
			esc_attr( $this->getValue() )
		);
		$this->echoOptionFooter();
	}

	public static function createUploaderScript() {
		if ( ! self::$firstLoad ) {
			return;
		}
		self::$firstLoad = false;

		?>
		<script>
		jQuery(document).ready(function($){
			"use strict";
			$('.mm-upload .thumbnail').find('img').parent().addClass('has-value').find(':before').css({'opacity':'0'});
			function tfUploadOptionCenterImage($this) {
				var _preview = $this.parents('.mm-upload').find('.thumbnail');
				$this.css({
					'marginTop': ( _preview.height() - $this.height() ) / 2,
					'marginLeft': ( _preview.width() - $this.width() ) / 2
				}).show();
			}


			// Calculate display offset of preview image on load.
			$('.mm-upload .thumbnail img').load(function() {
				tfUploadOptionCenterImage($(this));
			}).each(function(){
				// Sometimes the load event might not trigger due to cache.
				if(this.complete) {
					$(this).trigger('load');
				};
			});


			// In the theme customizer, the load event above doesn't work because of the accordion,
			// the image's height & width are detected as 0. We bind to the opening of an accordion
			// and adjust the image placement from there.
			var tfUploadAccordionSections = [];
			$('.mm-upload').each(function() {
				var $accordion = $(this).parents('.control-section.accordion-section');
				if ( $accordion.length > 0 ) {
					if ( $.inArray( $accordion, tfUploadAccordionSections ) == -1 ) {
						tfUploadAccordionSections.push($accordion);
					}
				}
			});
			$.each( tfUploadAccordionSections, function() {
				var $title = $(this).find('.accordion-section-title:eq(0)'); // Just opening the section.
				$title.click(function() {
					var $accordion = $(this).parents('.control-section.accordion-section');
					if ( ! $accordion.is('.open') ) {
						$accordion.find('.mm-upload .thumbnail img').each(function() {
							var $this = $(this);
							setTimeout(function() {
								tfUploadOptionCenterImage($this);
							}, 1);
						});
					}
				});
			});


			// Remove the image when the remove link is clicked.
			$('body').on('click', '.mm-upload i.remove', function(event) {
				event.preventDefault();
				var _input = $(this).parents('.mm-upload').find('input');
				var _preview = $(this).parents('.mm-upload').find('div.thumbnail');

				_preview.removeClass('has-value').find('img').remove().end().find('i').remove();
				_input.val('').trigger('change');

				return false;
			});


			// Open the upload media lightbox when the upload button is clicked.
			$('body').on('click', '.mm-upload .thumbnail, .mm-upload img', function(event) {
				event.preventDefault();
				// If we have a smaller image, users can click on the thumbnail.
				if ( $(this).is('.thumbnail') ) {
					if ( $(this).parents('.mm-upload').find('img').length != 0 ) {
						$(this).parents('.mm-upload').find('img').trigger('click');
						return true;
					}
				}

				var _input = $(this).parents('.mm-upload').find('input');
				var _preview = $(this).parents('.mm-upload').find('div.thumbnail');
				var _remove = $(this).siblings('.mm-upload-image-remove');

				// Uploader frame properties.
				var frame = wp.media({
					title: '<?php esc_html_e( 'Select Image', 'mobile-menu' ) ?>',
					multiple: false,
					library: { type: 'image' },
					button : { text : '<?php esc_html_e( 'Use image', 'mobile-menu' ) ?>' }
				});

				// Get the url when done.
				frame.on('select', function() {
					var selection = frame.state().get('selection');
					selection.each(function(attachment) {

						// if ( typeof attachment.attributes.sizes === 'undefined' ) {
						// 	return;
						// }

						if ( _input.length > 0 ) {
							_input.val(attachment.id);
						}

						if ( _preview.length > 0 ) {
							// remove current preview
							if ( _preview.find('img').length > 0 ) {
								_preview.find('img').remove();
							}
							if ( _preview.find('i.remove').length > 0 ) {
								_preview.find('i.remove').remove();
							}

							// Get the preview image.
						if ( typeof attachment.attributes.sizes != 'undefined' ) {
								var image = attachment.attributes.sizes.full;
 								if ( typeof attachment.attributes.sizes.thumbnail != 'undefined' ) {
 									image = attachment.attributes.sizes.thumbnail;
 								}
 								var url = image.url;
 								var marginTop = ( _preview.height() - image.height ) / 2;
 								var marginLeft = ( _preview.width() - image.width ) / 2;
 								var filename = '';
 							} else {
 								var url = attachment.attributes.url;
 								var marginTop = ( _preview.height() - 64 ) / 2;
 								var marginLeft = ( _preview.width() - 48 ) / 2;
 								var filename = attachment.attributes.filename;
							}

							$("<img src='" + url + "'/>").appendTo(_preview);
							$("<i class='dashicons dashicons-no-alt remove'></i>").prependTo(_preview);
						}
						// We need to trigger a change so that WP would detect that we changed the value.
						// Or else the save button won't be enabled.
						_input.trigger('change');

						_remove.show();
						$('.mm-upload .thumbnail').find('img').parent().addClass('has-value').find(':before').css({'opacity':'0'});
					});
					frame.off('select');
				});

				// Open the uploader.
				frame.open();

				return false;
			});
		});
		</script>
		<?php
	}
}
