<?php

namespace Mesmerize\Customizer\Panels;

class ContentPanel extends \Mesmerize\Customizer\BasePanel {


	private $popupTemplatesLoaded = false;

	public function init() {
		$this->companion()->customizer()->registerScripts( array( $this, 'addScripts' ) );
		$this->companion()->customizer()->previewInit( array( $this, '_addPreviewScripts' ) );
		add_action( 'cloudpress\customizer\global_scripts', array( $this, '_popupsTemplates' ) );
		add_action( 'cloudpress\customizer\preview_scripts', array( $this, 'loadWPEditor' ) );

		$this->addSections(
			array(
				'page_layout_reorder'   => array(
					'wp_data' => array(
						'title' => __( 'Reorder and remove sections', 'mesmerize-companion' ),
						'panel' => $this->id,
					),
				),
				'page_content_section'  => array(
					'wp_data' => array(
						'title' => __( 'Add sections into page', 'mesmerize-companion' ),
						'panel' => $this->id,
					),
				),
				'page_content_settings' => array(
					'wp_data' => array(
						'panel' => $this->id,
					),
				),
			)
		);
		$this->addSettings(
			array(
				'page_content' => array(
					'class'   => 'Mesmerize\\Customizer\\Settings\\ContentSetting',
					'section' => 'page_content_section',
					'wp_data' => array(
						'transport' => 'postMessage',
						'default'   => array(),
					),
					'control' => array(
						'class'      => 'Mesmerize\\Customizer\\Controls\\ContentSectionsListControl',
						'insertText' => __( 'Add Section', 'mesmerize-companion' ),
						'selection'  => 'check',
						'wp_data'    => array(),
						'dataSource' => array(
							'use_ajax' => true,
							'filter'   => 'sections',
						),
					),
				),
			)
		);
	}


	public function addScripts() {
		$jsUrl = $this->companion()->assetsRootURL() . '/js/customizer/';

		if ( apply_filters( '\cloudpress\customizer\load_bundled_version', true ) ) {

		} else {
			wp_enqueue_script( 'cp-customizer-content', $jsUrl . 'customizer-content.js', array( 'customizer-base' ), false, true );
			wp_enqueue_script( 'cp-customizer-content-tpls', $jsUrl . 'customizer-content-tpls.js', array( 'customizer-base' ), false, true );
			wp_enqueue_script( 'cp-customizer-content-handles', $jsUrl . 'customizer-content-handles.js', array( 'customizer-base' ), false, true );
			wp_enqueue_script( 'customizer-content-sections-overlays', $jsUrl . 'customizer-content-sections-overlays.js', array( 'customizer-base' ), false, true );
			wp_enqueue_script( 'cp-customizer-menu', $jsUrl . 'customizer-menu.js', array( 'customizer-base' ), false, true );
		}

	}

	public function _addPreviewScripts() {
		$jsUrl = $this->companion()->assetsRootURL() . '/js/customizer/';
	}

	public function loadWPEditor() {
		wp_enqueue_script( 'wplink' );
		wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );
	}

	public function _popupsTemplates() {
		if ( $this->popupTemplatesLoaded ) {
			return;
		}

		$this->popupTemplatesLoaded = true;

		?>
		<!--suppress JSAnnotator -->
		<div id="cp-container-editor" style="display:none">
			<ul id="cp-items">
			</ul>
			<div id="cp-items-footer">

				<button type="button" class="button button-large" id="cp-item-cancel"><?php _e( 'Cancel', 'mesmerize-companion' ); ?></button>
				<button type="button" class="button button-large button-primary" id="cp-item-ok"><?php _e( 'Apply Changes', 'mesmerize-companion' ); ?></button>
			</div>
		</div>

		<script id="toolbar-template" type="text/template">
			<div class="overlay-tooltip-panel fixed-overlay">
				<div class="overlay-toolbar">
					<div class="name-group overlay-tooltip-group fixed-overlay">
						<div class="tab_text">
							<i class="overlay-toolbar-element-type">
							</i>
						</div>
					</div>
					<div class="options-group cog overlay-tooltip-group fixed-overlay">
						<div class="overlay-contextual-menu">
						</div>
					</div>
					<div style="clear:both;width:0px">
					</div>
				</div>
			</div>
		</script>

		<script id="cp-content-templates-text" type="text/template">
			<li class="customize-control customize-control-text">
				<label>
					<span class="customize-control-title">{{{  label  }}}</span>
					<input type="text" value="{{{  value  }}}" id="{{{  id  }}}">
				</label>
			</li>
		</script>


		<script id="cp-content-templates-text-with-checkbox" type="text/template">
			<li class="customize-control customize-control-checkbox">
				<# if (canHide) { #>
				<label for="{{  id  }}__visible">
					<input id="{{  id  }}__visible" type="checkbox">
					{{ enableLabel }}
				</label>
				<# if (description) { #>
				<span class="description customize-control-description">
								{{  description  }}
							</span>
				<# } #>
				<# } #>
			</li>
			<li class="customize-control customize-control-text">
				<label id="{{  id  }}_container">
					<span class="customize-control-title">{{{  label  }}}</span>
					<input type="text" value="{{{  value.value  }}}" id="{{{  id  }}}">
				</label>
				<inline-script>
					jQuery("#{{ id }}__visible").prop("checked", {{ value.visible }});
					jQuery("#{{ id }}__visible").change(function(){
					if (jQuery(this).prop("checked")) {
					jQuery("#{{ id }}_container").show();
					} else {
					jQuery("#{{ id }}_container").hide();
					}
					})
					jQuery("#{{ id }}__visible").trigger("change");
				</inline-script>
			</li>
		</script>


		<script id="cp-content-templates-link" type="text/template">
			<li class="customize-control customize-control-text">
				<label class="link-options-group">
					<div class="link-option">
						<span class="customize-control-title">{{{  label  }}}</span>
						<input type="text" value="{{{  value.link  }}}" id="{{  id  }}__link">
					</div>
					<# if (value.target ) { #>
					<div class="target-option">
						<span class="customize-control-title"><?php _e( 'Target', 'mesmerize-companion' ); ?></span>
						<select type="text" id="{{  id  }}__target">
							<option value="_self"> <?php _e( 'Same tab', 'mesmerize-companion' ); ?></option>
							<option value="_blank"><?php _e( 'New tab', 'mesmerize-companion' ); ?></option>
							<# if(CP_Customizer.IS_PRO) { #>
							<option style="display:{{   (CP_Customizer.IS_PRO?'':'none')  }}" value="lightbox"><?php _e( 'Lightbox', 'mesmerize-companion' ); ?></option>
							<# } #>
						</select>
						<inline-script>
							jQuery("#{{ id }}__target").val("{{{ value.target }}}")
						</inline-script>
					</div>
					<# } #>
				</label>
			</li>
		</script>

		<script id="cp-content-templates-list" type="text/template">
			<li class="customize-control customize-control-text">
				<div class="list-control list" id="{{{  id  }}}">
					<# _.each(value, function(item, index) { #>
					<div class="section-list-item">
						<div class="handle reorder-handler"></div>
						<input class="item-editor" type="text" value="{{{  item.value  }}}">
						<div class="item-actions">
							<span class="item-remove" title="<?php _e( 'Delete section from page', 'mesmerize-companion' ); ?>" onClick='jQuery(this).parents(".section-list-item").remove()'></span>
						</div>
					</div>
					<# }); #>
				</div>
				<a class="add-item button-primary" id="add_{{  id  }}"><?php _e( 'Add Item', 'mesmerize-companion' ); ?></a>
				<inline-script>
					jQuery("#{{ id }}").sortable({"axis" : "y"});
					jQuery("#add_{{ id }}").click(function(){
					var list = jQuery("#{{ id }}");
					var $item = list.children().first().clone();
					list.append($item);
					})
				</inline-script>
			</li>
		</script>
		<script id="cp-content-templates-image" type="text/template">
			<li class="customize-control customize-control-text" style="display: list-item;">
				<label>
					<span class="customize-control-title">{{{  label  }}}</span>

					<div class="image-wrapper">
						<img id="preview-{{  id  }}" src="{{{  value  }}}">
					</div>
					<div class="image-controls">
						<input type="text" value="{{{  value  }}}" id="{{{  id  }}}">
						<button type="button" onClick='CP_Customizer.openMediaBrowser("{{{  mediaType  }}}", jQuery("#{{  id  }}"), {{  JSON.stringify(mediaData)  }})' class="button upload-button cp-image-select" data-cp-src="{{{  id  }}}"> <?php _e( 'Browse Image', 'mesmerize-companion' ); ?>  </button>
					</div>
					<inline-script>
						jQuery("#{{ id }}").change(function(){ jQuery("#preview-{{ id }}").attr("src",this.value)})
					</inline-script>
				</label>
			</li>
		</script>

		<script id="cp-content-templates-linked-icon" type="text/template">
			<li class="customize-control customize-control-text" style="display: list-item;">
				<div class="label">
					<span class="customize-control-title">{{{  label  }}}</span>
					<div class="image-wrapper">
						<i id="preview-icon-{{  id  }}" class="fa {{  value.icon  }}"></i>
						<# if (canHide) { #>
						<label for="{{  id  }}__visible">
							<input id="{{  id  }}__visible" type="checkbox" {{ (value.visible?"checked='true'":"") }}>
							<?php _e( 'Visible', 'mesmerize-companion' ); ?>
						</label>
						<# } #>
					</div>
					<div class="image-controls">
						<button type="button" style="margin-bottom: 0.5rem;" onClick='CP_Customizer.openMediaBrowser("{{{  mediaType }}}",
								jQuery("#{{  id  }}__icon"), {{  JSON.stringify(mediaData)  }})'
								class="button upload-button cp-fa-select" data-cp-src="{{  id  }}__icon"><?php _e( 'Browse Icon', 'mesmerize-companion' ); ?>
						</button>
						<div style="float:none"></div>
						<div style="float: left;width: calc( 100% - 110px);box-sizing: border-box;">
							<span class="customize-control-title" style="margin:0.5rem 0"> <?php _e( 'Link', 'mesmerize-companion' ); ?> </span>
							<input type="text" value="{{{  value.link  }}}" id="{{  id  }}__link">
						</div>

						<div style="float: left;width: 110px;padding-left: 4px;box-sizing: border-box;<#  if (!value.target) {  #>display:none<#  }  #>">
							<span class="customize-control-title" style="margin:0.5rem 0"><?php _e( 'Target', 'mesmerize-companion' ); ?> </span>
							<select type="text" id="{{  id  }}__target">
								<option value="_self"><?php _e( 'Same tab', 'mesmerize-companion' ); ?> </option>
								<option value="_blank"><?php _e( 'New tab', 'mesmerize-companion' ); ?> </option>
								<# if(CP_Customizer.IS_PRO) { #>
								<option style="display:{{   (CP_Customizer.IS_PRO?'':'none')  }}" value="lightbox"><?php _e( 'Lightbox', 'mesmerize-companion' ); ?> </option>
								<# } #>
							</select>
						</div>

						<# if(typeof styles !== 'undefined') { #>
						<div style="float: left;width: 50%;">
							<span class="customize-control-title" style="margin:0.5rem 0"><?php _e( 'Icon Style', 'mesmerize-companion' ); ?></span>
							<select type="text" id="{{  id  }}__style">
								<# _.each(styles, function(item, index) { #>
								<option value="{{{ item.value }}}">{{ item.label }}</option>
								<# }) #>
							</select>
							<inline-script>
								try{
								jQuery("[id={{ id }}__style").val("{{{ value.style }}}")
								} catch(e){}
							</inline-script>
						</div>

						<# } #>

						<# if(typeof sizes !== 'undefined') { #>
						<div style="float: left;margin-left: 10px;width: calc(50% - 10px);">
							<span class="customize-control-title" style="margin:0.5rem 0"><?php _e( 'Icon Size', 'mesmerize-companion' ); ?></span>
							<select type="text" id="{{  id  }}__size">
								<# _.each(sizes, function(item, index) { #>
								<option value="{{{ item.value }}}">{{ item.label }}</option>
								<# }) #>
							</select>
							<inline-script>
								try{
								jQuery("[id={{ id }}__size").val("{{{ value.size }}}")
								} catch(e){}
							</inline-script>
						</div>
						<# } #>

						<input type="hidden" value="{{{  value.icon  }}}" id="{{  id  }}__icon">
					</div>

				</div>
				<inline-script>
					jQuery("#{{ id }}__target").val("{{{ value.target }}}")
					jQuery("#{{ id }}__icon").change(function(){ jQuery("#preview-icon-{{ id }}").attr("class","fa " + this.value)})
				</inline-script>
			</li>
		</script>

		<script id="cp-content-templates-icon" type="text/template">
			<li class="customize-control customize-control-text" style="display: list-item;">
				<div>
					<span class="customize-control-title">{{{  label  }}}</span>
					<div class="image-wrapper">
						<i id="preview-icon-{{  id  }}" class="fa {{  value.icon  }}"></i>
						<# if (canHide) { #>
						<label for="{{  id  }}__visible">
							<input id="{{  id  }}__visible" type="checkbox" {{ (value.visible?"checked='true'":"") }}>
							<?php _e( 'Visible', 'mesmerize-companion' ); ?>
						</label>
						<# } #>
					</div>
					<div class="image-controls">
						<input type="hidden" value="{{{  value.icon  }}}" id="{{  id  }}__icon">
						<button type="button" style="margin-bottom: 0.5rem;" onClick='CP_Customizer.openMediaBrowser("{{{  mediaType }}}",
							jQuery("#{{  id  }}__icon"), {{  JSON.stringify(mediaData)  }})' class="button upload-button cp-fa-select" data-cp-src="{{  id  }}__icon"><?php _e( 'Browse Icon', 'mesmerize-companion' ); ?> </button>
						<div>
							<# if(typeof styles !== 'undefined') { #>
							<div style="float: left;width: 180px;">
								<span class="customize-control-title" style="margin:0.5rem 0"><?php _e( 'Icon Style', 'mesmerize-companion' ); ?></span>
								<select type="text" id="{{  id  }}__style">
									<# _.each(styles, function(item, index) { #>
									<option value="{{{ item.value }}}">{{ item.label }}</option>
									<# }) #>
								</select>
								<inline-script>
									try{
									jQuery("[id={{ id }}__style").val("{{{ value.style }}}")
									} catch(e){}
								</inline-script>
							</div>

							<# } #>

							<# if(typeof sizes !== 'undefined') { #>
							<div style="float: left;margin-left: 10px;width: 130px;">
								<span class="customize-control-title" style="margin:0.5rem 0"><?php _e( 'Icon Size', 'mesmerize-companion' ); ?></span>
								<select type="text" id="{{  id  }}__size">
									<# _.each(sizes, function(item, index) { #>
									<option value="{{{ item.value }}}">{{ item.label }}</option>
									<# }) #>
								</select>
								<inline-script>
									try{
									jQuery("[id={{ id }}__size").val("{{{ value.size }}}")
									} catch(e){}
								</inline-script>
							</div>
							<# } #>
						</div>

					</div>
				</div>
				<inline-script>
					jQuery("#{{ id }}__icon").change(function(){ jQuery("#preview-icon-{{ id }}").attr("class","fa " + this.value)})
				</inline-script>
			</li>
		</script>
		
		
		<?php

	}

	public function render_template() {
		?>
		<li id="accordion-panel-{{ data.id }}" data-name="{{{ data.id }}}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
			<h3 class="accordion-section-title no-chevron" tabindex="0">
				{{ data.title }}

				<span title="<?php _e( 'Add Section', 'mesmerize-companion' ); ?>" class="add-section-plus section-icon"></span>
				<span title="<?php _e( 'Page Settings', 'mesmerize-companion' ); ?>" class="section-icon setting hidden"></span>
			</h3>


			<div class="sections-list-reorder">
				<span class="customize-control-title"><?php _e( 'Manage page sections', 'mesmerize-companion' ); ?></span>
				<ul id="page_full_rows" class="list list-order">
					<li class="empty"><?php _e( 'No section added', 'mesmerize-companion' ); ?></li>
				</ul>
				<div class="add-section-container">
					<a class="cp-add-section available-item-hover-button button-primary"><?php _e( 'Add Section', 'mesmerize-companion' ); ?></a>
				</div>
			</div>
		</li>
		<?php
	}
}
