<?php

/**
 * Use of this field requires at least WordPress 3.5.
 *
 * Class SiteOrigin_Widget_Field_Media
 */
class SiteOrigin_Widget_Field_Media extends SiteOrigin_Widget_Field_Base {
	/**
	 * A label for the title of the media selector dialog.
	 *
	 * @var string
	 */
	protected $choose;

	/**
	 * A label for the confirmation button of the media selector dialog.
	 *
	 * @var string
	 */
	protected $update;

	/**
	 * A label to search for external images.
	 */
	protected $image_search;

	/**
	 * Sets the media library which to browse and from which media can be selected. Allowed values are 'image',
	 * 'audio', 'video', and 'file'. The default is 'file'.
	 *
	 * @var string
	 */
	protected $library;

	/**
	 * Whether or not to display a URL input field which allows for specification of a fallback URL to be used in case
	 * the selected media resource isn't available.
	 *
	 * @var bool
	 */
	protected $fallback;

	protected function initialize() {
		static $once;

		if ( empty( $once ) ) {
			add_action( 'siteorigin_widgets_footer_admin_templates', array( $this, 'image_search_dialog' ) );
		}
		$once = true;
	}

	protected function get_default_options() {
		return array(
			'choose' => __( 'Choose Media', 'so-widgets-bundle' ),
			'update' => __( 'Set Media', 'so-widgets-bundle' ),
			'image_search' => __( 'Image Search', 'so-widgets-bundle' ),
			'library' => 'image',
		);
	}

	protected function render_field( $value, $instance ) {
		if ( version_compare( get_bloginfo( 'version' ), '3.5', '<' ) ) {
			printf( __( 'You need to <a href="%s">upgrade</a> to WordPress 3.5 to use media fields', 'so-widgets-bundle' ), admin_url( 'update-core.php' ) );

			return;
		}

		if ( ! empty( $value ) ) {
			if ( is_array( $value ) ) {
				$src = $value;
			} else {
				$post = get_post( $value );
				$src = wp_get_attachment_image_src( $value, 'thumbnail' );

				if ( empty( $src ) ) {
					$src = wp_get_attachment_image_src( $value, 'thumbnail', true );
				}
			}
		} else {
			$src = array( '', 0, 0 );
		}

		// If library is set to all, convert it to a wildcard as all isn't valid
		if ( $this->library == 'all' ) {
			$this->library = '*';
		}
		?>
		<div class="media-field-wrapper">
			<div class="current">
				<div class="thumbnail-wrapper">
					<img src="<?php echo sow_esc_url( $src[0] ); ?>" class="thumbnail" <?php if ( empty( $src[0] ) ) {
						echo "style='display:none'";
					} ?> <?php if ( ! empty( $post ) ) {
						echo 'title="' . esc_attr( $post->post_title ) . '"';
					} ?>/>
					<div class="title"><?php if ( ! empty( $post ) ) {
						echo esc_attr( $post->post_title );
					} ?></div>
				</div>
			</div>
			<a
				href="#"
				class="media-upload-button"
				data-choose="<?php echo esc_attr( $this->choose ); ?>"
				data-update="<?php echo esc_attr( $this->update ); ?>"
				data-library="<?php echo esc_attr( $this->library ); ?>"
			>
				<?php echo esc_html( $this->choose ); ?>
			</a>
			<?php if ( $this->library == 'image' ) { ?>
				<a href="#" class="find-image-button">
					<?php echo esc_html( $this->image_search ); ?>
				</a>
			<?php } ?>
		</div>

		<a href="#" class="media-remove-button <?php if ( empty( $value ) ) {
			echo 'remove-hide';
		} ?>">
			<?php esc_html_e( 'Remove', 'so-widgets-bundle' ); ?>
		</a>
		<input type="hidden" value="<?php echo esc_attr( is_array( $value ) ? '-1' : $value ); ?>" name="<?php echo esc_attr( $this->element_name ); ?>" class="siteorigin-widget-input" />

		<?php
	}

	protected function render_after_field( $value, $instance ) {
		if ( ! empty( $this->fallback ) ) {
			$fallback_name = $this->get_fallback_field_name( $this->base_name );
			$fallback_url = ! empty( $instance[ $fallback_name ] ) ? $instance[ $fallback_name ] : '';
			?>
			<input
				type="text"
				value="<?php echo esc_url( $fallback_url ); ?>"
				placeholder="<?php esc_attr_e( 'External URL', 'so-widgets-bundle' ); ?>"
				name="<?php echo esc_attr( $this->for_widget->so_get_field_name( $this->base_name . '_fallback', $this->parent_container ) ); ?>"
				class="media-fallback-external siteorigin-widget-input"
			/>
			<div class="clear"></div>
			<?php
		} else {
			?>
			<div class="clear"></div>
			<?php
		}
		//Still want the default description, if there is one.
		parent::render_after_field( $value, $instance );
	}

	protected function sanitize_field_input( $value, $instance ) {
		// Media values should be integer
		return (int) $value;
	}

	public function sanitize_instance( $instance ) {
		$fallback_name = $this->get_fallback_field_name( $this->base_name );

		if ( ! empty( $this->fallback ) && ! empty( $instance[ $fallback_name ] ) ) {
			$instance[ $fallback_name ] = sow_esc_url_raw( $instance[ $fallback_name ] );
		}

		return $instance;
	}

	public function get_fallback_field_name( $base_name ) {
		$v_name = $base_name;

		if ( strpos( $v_name, '][' ) !== false ) {
			// Remove this splitter
			$v_name = substr( $v_name, strpos( $v_name, '][' ) + 2 );
		}

		return $v_name . '_fallback';
	}

	public function enqueue_scripts() {
		wp_enqueue_script(
			'so-media-field',
			plugin_dir_url( __FILE__ ) . 'js/media-field' . SOW_BUNDLE_JS_SUFFIX . '.js',
			array( 'jquery' ),
			SOW_BUNDLE_VERSION
		);

		wp_enqueue_style(
			'so-media-field',
			plugin_dir_url( __FILE__ ) . 'css/media-field.css',
			array(),
			SOW_BUNDLE_VERSION
		);
	}

	public function image_search_dialog() {
		?>
		<script type="text/template" id="so-widgets-bundle-tpl-image-search-dialog">
			<div class="so-widgets-dialog" id="so-widgets-image-search" data-confirm-import="<?php esc_attr_e( 'Would you like to import this image into your media library?', 'so-widgets-bundle' ); ?>">
				<div class="so-widgets-dialog-overlay"></div>

				<div class="so-widgets-toolbar">
					<h3>
						<?php echo esc_html__( 'Search For Images', 'so-widgets-bundle' ); ?>
					</h3>
					<div class="close" tabindex="0"><span class="dashicons dashicons-no-alt"></span></div>
				</div>

				<div class="so-widgets-dialog-frame">
					<div id="so-widgets-image-search-frame">

						<form id="so-widgets-image-search-form">
							<input type="text" value="" name="s" class="widefat so-widgets-search-input" placeholder="<?php echo esc_attr_e( 'Search For Images', 'so-widgets-bundle' ); ?>" />
							<?php wp_nonce_field( 'so-image', '_sononce', false ); ?>
							<button type="submit" class="button-primary so-widgets-search-button">
								<span class="dashicons dashicons-search"></span>
							</button>

							<div id="so-widgets-image-search-suggestions">
								<strong><?php esc_html_e( 'Related Searches: ', 'so-widgets-bundle' ); ?></strong>
								<ul class="so-keywords-list"></ul>
							</div>
						</form>
						<div id="so-widgets-image-search-powered">
							<?php
							printf(
								__( 'Powered by %s', 'so-widgets-bundle' ),
								'<a href="https://pixabay.com/" target="_blank" rel="noopener noreferrer">Pixabay</a>'
							);
							?>
						</div>

						<div class="so-widgets-image-results"></div>

						<div class="so-widgets-results-loading">
							<div class="so-widgets-loading-icon"></div>
							<strong
								data-loading="<?php esc_attr_e( 'Loading Images', 'so-widgets-bundle' ); ?>"
								data-importing="<?php esc_attr_e( 'Downloading Image - Please Wait', 'so-widgets-bundle' ); ?>"></strong>
						</div>
						<div class="so-widgets-results-more">
							<button class="button-secondary"><?php esc_html_e( 'Load More', 'so-widgets-bundle' ); ?></button>
						</div>

						<div class="so-widgets-preview-window">
							<div class="so-widgets-preview-window-inside">
							</div>
						</div>
					</div>
				</div>
			</div>
		</script>

		<script type="text/template" id="so-widgets-bundle-tpl-image-search-result">
			<div class="so-widgets-result">
				<a class="so-widgets-result-image"></a>
			</div>
		</script>

		<script type="text/template" id="so-widgets-bundle-tpl-image-search-result-sponsored">
			<span class="so-widgets-result-sponsored"><?php esc_html_e( 'Sponsored', 'so-widgets-bundle' ); ?></span>
		</script>
		<?php
	}
}
