<?php
/**
 * @copyright	Copyright (C) 2011 Simplify Your Web, Inc. All rights reserved.
 * @license		GNU General Public License version 3 or later; see LICENSE.txt
 */

namespace SYW\Library\Field;

defined('_JEXEC') or die ;

use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\Factory;
use Joomla\CMS\Form\FormField;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;

class SywtransitionpickerField extends FormField
{
	public $type = 'Sywtransitionpicker';
	
	protected $use_global;
	protected $transitions;
	protected $transitiongroups;
	protected $icon;
	protected $help;
	protected $sampleimage;
	protected $sampleicon;
	
	protected function getTransitionGroup($transitiongroup, $image, $icon)
	{
		$transitions = array();
		
		switch ($transitiongroup) {
			case '2d':
				$transitions[] = 'hvr-grow';
				$transitions[] = 'hvr-shrink';
				$transitions[] = 'hvr-pulse';
				$transitions[] = 'hvr-pulse-grow';
				$transitions[] = 'hvr-pulse-shrink';
				$transitions[] = 'hvr-push';
				$transitions[] = 'hvr-pop';
				$transitions[] = 'hvr-bounce-in';
				$transitions[] = 'hvr-bounce-out';
				$transitions[] = 'hvr-rotate';
				$transitions[] = 'hvr-grow-rotate';
				$transitions[] = 'hvr-wobble-vertical';
				$transitions[] = 'hvr-wobble-horizontal';
				$transitions[] = 'hvr-buzz';
				$transitions[] = 'hvr-buzz-out';
				break;
			case 'background':
				$transitions[] = 'hvr-fade';
				$transitions[] = 'hvr-back-pulse';
				$transitions[] = 'hvr-sweep-to-right';
				$transitions[] = 'hvr-sweep-to-left';
				$transitions[] = 'hvr-sweep-to-bottom';
				$transitions[] = 'hvr-sweep-to-top';
				$transitions[] = 'hvr-bounce-to-right';
				$transitions[] = 'hvr-bounce-to-left';
				$transitions[] = 'hvr-bounce-to-bottom';
				$transitions[] = 'hvr-bounce-to-top';
				$transitions[] = 'hvr-radial-in';
				$transitions[] = 'hvr-radial-out';
				$transitions[] = 'hvr-rectangle-in';
				$transitions[] = 'hvr-rectangle-out';
				$transitions[] = 'hvr-shutter-in-horizontal';
				$transitions[] = 'hvr-shutter-out-horizontal';
				$transitions[] = 'hvr-shutter-in-vertical';
				$transitions[] = 'hvr-shutter-out-vertical';
				break;
		}
		
		$transitionlist = '';
		foreach ($transitions as $transition_item) {
			$transition_item = str_replace('hvr-', '', $transition_item);
			$transitionlist .= '<li data-transition="'.$transition_item.'">';
			$transitionlist .= '<a href="#" class="dropdown-item hvr-'.$transition_item.'" style="display: inline-block; padding: 8px; font-size: 1em" aria-label="'.$transition_item.'" onclick="return false;">';
			
			if (!empty($image)) {
				$transitionlist .= '<img src="'.URI::root().$image.'" alt="'.$transition_item.'"><span style="margin-left: 10px">'.$transition_item.'</span>';
			} else if (!empty($icon)) {
				$transitionlist .= '<i class="'.$icon.'" aria-hidden="true" style="font-size: 2.4em"></i><span style="margin-left: 10px">'.$transition_item.'</span>';
			} else {
				$transitionlist .= $transition_item;
			}
			
			$transitionlist .= '</a>';
			$transitionlist .= '</li>';
		}
		
		return $transitionlist;
	}
	
	protected function getTransitions($image, $icon)
	{
		$li_transitions = '';
		
		$transitiongrouplist = array('2d', 'background');
		
		foreach ($transitiongrouplist as $i => $transitiongrouplist_item) {
			$li_transitions .= self::getTransitionGroup($transitiongrouplist_item, $image, $icon);
			if ($i < count($transitiongrouplist) - 1) {
				$li_transitions .= '<li><hr class="dropdown-divider"></li>';
			}
		}
		
		return $li_transitions;
	}
	
	protected function getInput()
	{
		$wam = Factory::getApplication()->getDocument()->getWebAssetManager();
		
		$lang = Factory::getLanguage();
		$lang->load('lib_syw.sys', JPATH_SITE);
		
		HTMLHelper::_('bootstrap.tooltip', '.hasTooltip');
		HTMLHelper::_('bootstrap.dropdown', '.dropdown-toggle');
		
		$wam->registerAndUseStyle('syw.font', 'syw/fonts.min.css', ['relative' => true, 'version' => 'auto']);
		
		if (isset($this->transitions) || (isset($this->transitiongroups) && strpos($this->transitiongroups, '2d') !== false) || (!isset($this->transitions) && !isset($this->transitiongroups))) {
			$wam->registerAndUseStyle('syw.transitions.2d', 'syw/2d-transitions.min.css', ['relative' => true, 'version' => 'auto']);
		}
		
		if (isset($this->transitions) || (isset($this->transitiongroups) && strpos($this->transitiongroups, 'background') !== false) || (!isset($this->transitions) && !isset($this->transitiongroups))) {
			$wam->registerAndUseStyle('syw.transitions.bg', 'syw/bg-transitions.min.css', ['relative' => true, 'version' => 'auto']);
		}
		
		$global_value = '';
		
		if ($this->use_global) {
			$component  = Factory::getApplication()->input->getCmd('option');
			if ($component == 'com_menus') { // we are in the context of a menu item
				$uri = new Uri($this->form->getData()->get('link'));
				$component = $uri->getVar('option', 'com_menus');
				
				$config_params = ComponentHelper::getParams($component);
				
				$config_value = $config_params->get($this->fieldname);
				
				if (!is_null($config_value)) {
					$global_value = $config_value;
					
					if ($global_value === 'none') {
						$global_value = Text::_('JNONE');
					}
				}
			}
		}
		
		$wam->addInlineScript('
			document.addEventListener("readystatechange", function(event) {
				if (event.target.readyState == "complete") {
			
                    let select_' . $this->id . ' = document.getElementById("' . $this->id . '_select");
                    if (select_' . $this->id . ' != null) {
                        let options_' . $this->id . ' = select_' . $this->id . '.querySelectorAll("li[data-transition]");
                        let input_' . $this->id . ' = document.getElementById("' . $this->id . '");
                        let input_disabled_' . $this->id . ' = document.getElementById("' . $this->id . '_disabled");
			
						if (input_' . $this->id . '.value == "none") {
				 			input_disabled_' . $this->id . '.value = "' . Text::_('JNONE') . '";
				 			select_' . $this->id . '.querySelector(".none").querySelector(".dropdown-item").classList.add("active");
				 		} else if (input_' . $this->id . '.value != "") {
				 			input_disabled_' . $this->id . '.value = input_' . $this->id . '.value;
				 			let entry_value = select_' . $this->id . '.querySelector("li[data-transition=\'' . $this->value . '\']");
				 			entry_value.querySelector(".dropdown-item").classList.add("active");
				 		}
			
						options_' . $this->id . '.forEach (function (option) {
                            option.addEventListener("click", function(event) {
			
                                if (input_' . $this->id . '.value != "" && input_' . $this->id . '.value != "none") {
                                    let entry_value = select_' . $this->id . '.querySelector("li[data-transition=" + input_' . $this->id . '.value + "]");
                                    entry_value.querySelector(".dropdown-item").classList.remove("active");
                                }
								this.querySelector(".dropdown-item").classList.add("active");
			
								select_' . $this->id . '.querySelector(".none").querySelector(".dropdown-item").classList.remove("active");
			
                                let selected_transition = this.getAttribute("data-transition");
                                input_' . $this->id . '.value = selected_transition;
                                document.getElementById("' . $this->id . '_disabled").value = selected_transition;
                            });
                        });
			
						if (input_disabled_' . $this->id . '.classList.contains("useGlobal")) {
	                        document.getElementById("' . $this->id . '_clear").addEventListener("click", function(event) {
			
	                            if (input_' . $this->id . '.value != "" && input_' . $this->id . '.value != "none") {
	                                let entry_value = select_' . $this->id . '.querySelector("li[data-transition=" + input_' . $this->id . '.value + "]");
									entry_value.querySelector(".dropdown-item").classList.remove("active");
	                            }
			
								select_' . $this->id . '.querySelector(".none").querySelector(".dropdown-item").classList.remove("active");
			
	                            input_' . $this->id . '.value = "";
	                            input_disabled_' . $this->id . '.value = "";
			
								if (input_disabled_' . $this->id . '.classList.contains("useGlobal")) {
									input_disabled_' . $this->id . '.setAttribute("placeholder", "' . Text::sprintf('JGLOBAL_USE_GLOBAL_VALUE', $global_value) . '");
								}
	                        });
						}
			
						select_' . $this->id . '.querySelector(".none").addEventListener("click", function(event) {
							this.querySelector(".dropdown-item").classList.add("active");
			
							if (input_' . $this->id . '.value != "" && input_' . $this->id . '.value != "none") {
								let entry_value = select_' . $this->id . '.querySelector("li[data-transition=" + input_' . $this->id . '.value + "]");
								entry_value.querySelector(".dropdown-item").classList.remove("active");
							}
			
							input_' . $this->id . '.value = "none";
							input_disabled_' . $this->id . '.value = "' . Text::_('JNONE') . '";
						});
                    }
                }
			});
		');
		
		$html = '';
		
		$icon_svg = '';
		if (!isset($this->icon)) {
			$icon_svg = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" style="width: 1em; fill: transparent"><path d="M15.8189 13.3287L10.4948 19.3183C9.69924 20.2134 8.30076 20.2134 7.50518 19.3183L2.18109 13.3287C1.50752 12.571 1.50752 11.429 2.18109 10.6713L7.50518 4.68167C8.30076 3.78664 9.69924 3.78664 10.4948 4.68167L15.8189 10.6713C16.4925 11.429 16.4925 12.571 15.8189 13.3287Z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 6.375L13.5052 4.68167C14.3008 3.78664 15.6992 3.78664 16.4948 4.68167L21.8189 10.6713C22.4925 11.429 22.4925 12.571 21.8189 13.3287L16.4948 19.3183C15.6992 20.2134 14.3008 20.2134 13.5052 19.3183L12 17.625" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
		}

		$placeholder = '';
		if (empty($this->value) && $this->use_global) {
			$placeholder = ' placeholder="' . Text::sprintf('JGLOBAL_USE_GLOBAL_VALUE', $global_value) . '"';
		}
		
		$html .= '<input type="hidden" name="'.$this->name.'" id="'.$this->id.'"'.' value="'.htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8').'" />';
				
		$html .= '<div class="input-group">';
		
		if ($icon_svg) {
			$html .= '<span class="input-group-text">'.$icon_svg.'</span>';
		} else {
			$html .= '<span class="input-group-text"><i class="'.$this->icon.'" aria-hidden="true"></i></span>';
		}
		
		$html .= '<input type="text" class="form-control' . ($this->use_global ? ' useGlobal' : '') . '" name="'.$this->name.'_disabled" id="'.$this->id.'_disabled"'.' value="'.htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8').'" disabled="disabled"' . $placeholder . ' />';
		
		$html .= '<button type="button" id="'.$this->id.'_caret" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="' . Text::_('LIB_SYW_TRANSITIONPICKER_SELECTTRANSITION') . '"></button>';
		
		$html .= '<ul id="'.$this->id.'_select" class="dropdown-menu dropdown-menu-end" aria-labelledby="'.$this->id.'_caret" style="min-width: 250px; max-height: 200px; overflow: auto">';
		
		$html .= '<li class="none"><span class="dropdown-item">' . Text::_('JNONE') . '</span></li>';
		
		if (isset($this->transitions)) {
			$transitions = explode(",", $this->transitions);
			foreach ($transitions as $transition_item) {
				$transition_item = str_replace('hvr-', '', $transition_item); // just in case
				$html .= '<li data-transition="'.$transition_item.'">';
				$html .= '<a href="#" class="dropdown-item hvr-'.$transition_item.'" style="display: inline-block; padding: 8px; font-size: 1em" aria-label="'.$transition_item.'" onclick="return false;">';
				
				if (!empty($this->sampleimage)) {
					$html .= '<img src="'.URI::root().$this->sampleimage.'" alt="'.$transition_item.'"><span style="margin-left: 10px">'.$transition_item.'</span>';
				} else if (!empty($this->sampleicon)) {
					$html .= '<i class="'.$this->sampleicon.'" aria-hidden="true" style="font-size: 2.4em"></i><span style="margin-left: 10px">'.$transition_item.'</span>';
				} else {
					$html .= $transition_item;
				}
				
				$html .= '</a>';
				$html .= '</li>';
			}
		} else if (isset($this->transitiongroups)) {
			$transitiongroups = explode(",", $this->transitiongroups);
			foreach ($transitiongroups as $i => $transitiongroup_item) {
				$html .= self::getTransitionGroup($transitiongroup_item, $this->sampleimage, $this->sampleicon);
				if ($i < count($transitiongroups) - 1) {
					$html .= '<li><hr class="dropdown-divider"></li>';
				}
			}
		} else {
			$html .= self::getTransitions($this->sampleimage, $this->sampleicon);
		}
		
		$html .= '</ul>';
		
		if ($this->use_global) {
			$html .= '<button type="button" id="'.$this->id.'_clear" class="btn btn-danger hasTooltip" title="' . Text::_('JCLEAR') . '" aria-label="' . Text::_('JCLEAR') . '"><i class="icon-remove" aria-hidden="true"></i></button>';
		}
		
		$html .= '</div>';
		
		if ($this->help) {
			$html .= '<span class="help-block" style="font-size: .8rem">'.Text::_($this->help).'</span>';
		}
		
		return $html;
	}
	
	public function setup(\SimpleXMLElement $element, $value, $group = null)
	{
		$return = parent::setup($element, $value, $group);
		
		if ($return) {
			$this->use_global = ((string)$this->element['global'] == "true" || (string)$this->element['useglobal'] == "true") ? true : false;
			$this->transitions = isset($this->element['transitions']) ? (string)$this->element['transitions'] : null;
			$this->transitiongroups = isset($this->element['transitiongroups']) ? (string)$this->element['transitiongroups'] : null;
			$this->icon = isset($this->element['icon']) ? (string)$this->element['icon'] : null;
			$this->help = isset($this->element['help']) ? (string)$this->element['help'] : '';
			$this->sampleimage = isset($this->element['sampleimage']) ? (string)$this->element['sampleimage'] : null;
			$this->sampleicon = isset($this->element['sampleicon']) ? (string)$this->element['sampleicon'] : null;
		}
		
		return $return;
	}
}
?>