<?php

/**
 * @package JPageBuilder
 * @author Joomla! Extensions Store
 * @copyright (C) 2024 - Joomla! Extensions Store
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
// no direct access
defined ( '_JEXEC' ) or die ( 'Restricted access' );
class JpagebuilderAddonIcons_group extends JpagebuilderAddons {
	/**
	 * The addon frontend render method.
	 * The returned HTML string will render to the frontend page.
	 *
	 * @return string The HTML string.
	 * @since 1.0.0
	 */
	public function render() {
		$settings = $this->addon->settings;

		// Addon Options
		$class = (isset ( $settings->class ) && $settings->class) ? $settings->class : '';
		$icon_items = (isset ( $settings->jp_icons_group_item ) && $settings->jp_icons_group_item) ? $settings->jp_icons_group_item : '';

		$title = (isset ( $settings->title ) && $settings->title) ? $settings->title : '';
		$title_position = (isset ( $settings->title_position ) && $settings->title_position) ? $settings->title_position : 'top';
		$heading_selector = (isset ( $settings->heading_selector ) && $settings->heading_selector) ? $settings->heading_selector : 'h2';
		$title_icon = (isset ( $settings->title_icon ) && $settings->title_icon) ? $settings->title_icon : '';
		$title_icon_position = (isset ( $settings->title_icon_position ) && $settings->title_icon_position) ? $settings->title_icon_position : 'before';

		$output = '';
		$output .= '<div class="jpb-addon jpb-addon-icons-group ' . $class . ' ' . ($title_position ? 'icons-group-title-postion-' . $title_position : '') . '">';

		if ($title) {
			$output .= '<' . $heading_selector . ' class="jpb-addon-title">';
			if ($title_icon) {
				$icon_arr = array_filter ( explode ( ' ', $title_icon ) );
				if (count ( $icon_arr ) === 1) {
					$title_icon = 'fa ' . $title_icon;
				}
			}
			if ($title_icon && $title_icon_position == 'before') {
				$output .= '<span class="' . $title_icon . '" aria-hidden="true"></span> ';
			}
			$output .= $title;
			if ($title_icon && $title_icon_position == 'after') {
				$output .= ' <span class="' . $title_icon . '" aria-hidden="true"></span>';
			}
			$output .= '</' . $heading_selector . '>';
		}

		$output .= '<ul class="jpb-icons-group-list">';

		if (is_array ( $icon_items ) && count ( $icon_items ) > 0) {
			foreach ( $icon_items as $key => $icon_item ) {
				$key ++;

				$icon_class = (isset ( $icon_item->icon_class ) && $icon_item->icon_class !== '') ? ' ' . $icon_item->icon_class : '';
				$title = (isset ( $icon_item->title ) && $icon_item->title) ? $icon_item->title : '';

				$icon_id = $this->addon->id . $key;
				list ( $link, $target ) = JpagebuilderAddonHelper::parseLink ( $icon_item, 'icon_link', [ 
						'url' => 'icon_link',
						'new_tab' => 'link_open_new_window'
				] );

				$output .= '<li id="icon-' . $icon_id . '" class="' . $icon_class . '">';

				if (! empty ( $link )) {
					$output .= '<a href="' . $link . '" aria-label="' . strip_tags ( $title ) . '" ' . $target . '>';
				}

				if (isset ( $icon_item->label_position ) && ! empty ( $icon_item->show_label ) && $icon_item->label_position == 'top') {
					$output .= '<span class="jpb-icons-label-text">' . (isset ( $icon_item->label_text ) ? $icon_item->label_text : '') . '</span>';
				}

				if (isset ( $icon_item->icon_name )) {
					$icon_arr2 = array_filter ( explode ( ' ', $icon_item->icon_name ) );

					if (count ( $icon_arr2 ) === 1) {
						$icon_item->icon_name = 'fa ' . $icon_item->icon_name;
					}

					$output .= '<i class="' . $icon_item->icon_name . ' " aria-hidden="true" title="' . $title . '"></i>';
					$output .= '<span class="jpb-form-label-visually-hidden">' . (empty ( $title ) ? $icon_item->icon_name : $title) . '</span>';
				}

				if (isset ( $icon_item->label_position ) && ! empty ( $icon_item->show_label ) && $icon_item->label_position == 'right') {
					$output .= '<span class="jpb-icons-label-text right">&nbsp;' . (isset ( $icon_item->label_text ) ? $icon_item->label_text : '') . '</span>';
				}

				if (isset ( $icon_item->label_position ) && ! empty ( $icon_item->show_label ) && $icon_item->label_position == 'bottom') {
					$output .= '<span class="jpb-icons-label-text">' . (isset ( $icon_item->label_text ) ? $icon_item->label_text : '') . '</span>';
				}

				if (! empty ( $link )) {
					$output .= '</a>';
				}

				$output .= '</li>';
			}
		}

		$output .= '</ul>';
		$output .= '</div>';

		return $output;
	}

	/**
	 * Generate the CSS string for the frontend page.
	 *
	 * @return string The CSS string for the page.
	 * @since 1.0.0
	 */
	public function css() {
		$addon_id = '#jpb-addon-' . $this->addon->id;
		$settings = $this->addon->settings;
		$cssHelper = new JpagebuilderCSSHelper ( $addon_id );

		$styles = [ ];

		if(isset($settings->jp_icons_group_item ) && is_array($settings->jp_icons_group_item )) {
			foreach ( $settings->jp_icons_group_item as $key => $addon_item ) {
				$key ++;
				$icon_id = $this->addon->id . $key;
				$css = '';
	
				$iconStyle = '';
	
				list ( $link ) = JpagebuilderAddonHelper::parseLink ( $addon_item, 'icon_link', [ 
						'new_tab' => 'link_open_new_window',
						'url' => 'icon_link'
				] );
	
				if (! empty ( $link )) {
					$iconStyle .= $cssHelper->generateStyle ( ".jpb-icons-group-list li#icon-" . $icon_id . " a", $addon_item, [ 
							'height' => 'height',
							'padding' => 'padding',
							'width' => 'width',
							'color' => 'color',
							'background' => 'background-color',
							'border_color' => 'border-color',
							'border_style' => 'border-style',
							'border_width' => 'border-width',
							'border_radius' => 'border-radius'
					], [ 
							'color' => false,
							'background' => false,
							'border_color' => false,
							'border_style' => false
					], [ 
							'padding' => 'spacing'
					] );
				} else {
					$iconStyle .= $cssHelper->generateStyle ( ".jpb-icons-group-list li#icon-" . $icon_id . "", $addon_item, [ 
							'height' => 'height',
							'padding' => 'padding',
							'width' => 'width',
							'color' => 'color',
							'background' => 'background-color',
							'border_color' => 'border-color',
							'border_style' => 'border-style',
							'border_width' => 'border-width',
							'border_radius' => 'border-radius'
					], [ 
							'color' => false,
							'background' => false,
							'border_color' => false,
							'border_style' => false
					], [ 
							'padding' => 'spacing'
					] );
				}
	
				$itemDisplayStyle = $cssHelper->generateStyle ( " .jpb-icons-group-list li#icon-" . $icon_id, $settings, [ 
						'item_display' => 'display',
						'size' => 'font-size'
				], [ 
						'item_display' => false
				] );
				$iconHoverStyle = $cssHelper->generateStyle ( ".jpb-icons-group-list li#icon-" . $icon_id . " a:hover", $addon_item, [ 
						'hover_color' => 'color',
						'hover_background' => 'background',
						'hover_border_color' => 'border-color'
				], false );
				$iconMarginStyle = $cssHelper->generateStyle ( ".jpb-icons-group-list li#icon-" . $icon_id . " a", $settings, [ 
						'margin' => 'margin'
				] );
				$fontStyle = $cssHelper->generateStyle ( ".jpb-icons-group-list li#icon-" . $icon_id . " a", $settings, [ 
						'size' => 'font-size'
				] );
				$labelStyle = $cssHelper->generateStyle ( ".jpb-icons-group-list li#icon-" . $icon_id . " .jpb-icons-label-text", $addon_item, [ 
						'label_margin' => 'margin'
				], false, [ 
						'label_margin' => 'spacing'
				] );
				$labelFontStyle = $cssHelper->typography ( ".jpb-icons-group-list li#icon-" . $icon_id . " .jpb-icons-label-text", $addon_item, 'label_typography', [ 
						'size' => 'label_size',
						'line_height' => 'label_lineheight',
						'letter_spacing' => 'label_letterspace',
						'uppercase' => 'label_font_style.uppercase',
						'italic' => 'label_font_style.italic',
						'underline' => 'label_font_style.underline',
						'weight' => 'label_font_style.weight'
				] );
	
				$css .= $cssHelper->generateStyle ( ".jpb-icons-group-list li", $settings, [ 
						"margin" => "margin"
				] );
				$css .= $cssHelper->generateStyle ( ".jpb-icons-group-list", $settings, [ 
						"margin" => "margin: -%s"
				] );
	
				$css .= $fontStyle;
				$css .= $iconStyle;
				$css .= $labelStyle;
				$css .= $itemDisplayStyle;
				$css .= $labelFontStyle;
				$css .= $iconHoverStyle;
				$css .= $iconMarginStyle;
	
				$styles [$key] = $css;
			}
		}

		$styles_explode = implode ( "\n", $styles );

		// Alignment style
		$settings->icon_alignment = $cssHelper->parseAlignment ( $settings, 'icon_alignment' );
		$styles_explode .= $cssHelper->generateStyle ( '.jpb-addon-icons-group', $settings, [ 
				'icon_alignment' => 'text-align'
		], false );

		$titleStyle = $cssHelper->generateStyle ( '.jpb-addon-title', $settings, [ 
				'title_margin' => 'margin',
				'title_text_transform' => 'text-transform',
				'title_padding' => 'padding'
		], false, [ 
				'title_margin' => 'spacing',
				'title_padding' => 'spacing'
		] );
		$styles_explode .= $titleStyle;
		$transformCss = $cssHelper->generateTransformStyle ( '.jpb-icons-group-list', $settings, 'transform' );
		$styles_explode .= $transformCss;

		return $styles_explode;
	}

	/**
	 * Generate the lodash template string for the frontend editor.
	 *
	 * @return string The lodash template string.
	 * @since 1.0.0
	 */
	public static function getFrontendEditor() {
		$lodash = new JpagebuilderLodashlib ( '#jpb-addon-{{data.id}}' );
		$output = '

        <style type="text/css">';

		$output .= $lodash->alignment ( 'text-align', '.jpb-addon-icons-group', 'data.icon_alignment' );

		$output .= '
        <#
            _.each (data.jp_icons_group_item, function(addon_item, key) {
                key ++;
                var icon_id = data.id + key;
        #>';
		$output .= $lodash->unit ( 'margin', '.jpb-icons-group-list', 'data.margin', 'px', false, '-' );
		$output .= $lodash->unit ( 'font-size', '.jpb-icons-group-list li#icon-{{icon_id}} i', 'data.size', 'px' );
		$output .= $lodash->unit ( 'margin', '.jpb-icons-group-list li#icon-{{icon_id}}', 'data.margin', 'px' );
		$output .= $lodash->unit ( 'display', '.jpb-icons-group-list li#icon-{{icon_id}}', 'data.item_display' );
		$output .= $lodash->spacing ( 'margin', '.jpb-addon-title', 'data.title_margin' );
		$output .= $lodash->spacing ( 'padding', '.jpb-addon-title', 'data.title_padding' );

		// Title
		$titleTypographyFallbacks = [ 
				'font' => 'data.title_font_family',
				'size' => 'data.title_fontsize',
				'line_height' => 'data.title_lineheight',
				'letter_spacing' => 'data.title_letterspace',
				'uppercase' => 'data.title_font_style?.uppercase',
				'italic' => 'data.title_font_style?.italic',
				'underline' => 'data.title_font_style?.underline',
				'weight' => 'data.title_font_style?.weight'
		];

		$output .= $lodash->typography ( '.jpb-addon-title', 'data.title_typography', $titleTypographyFallbacks );

		$output .= '<# 
		const {icon_link} = addon_item;
		const isUrlObject_title = _.isObject(icon_link) && (!!icon_link.url || !!icon_link.menu || !!icon_link.page);
		const isUrlString_icon = _.isString(icon_link) && icon_link !== "";
		const isUrlString_title = _.isString(data.title_link) && data.title_link !== "";

		if(isUrlObject_title || isUrlString_icon || isUrlString_title){
			const urlObj = icon_link?.url ? icon_link : window.getSiteUrl(icon_link, addon_item.link_open_new_window);
			const {url, new_tab, nofollow, type, noopener, noreferrer} = urlObj;
			const target = new_tab ? "_blank" : "";
			
			let rel = "";
			rel += nofollow ? "nofollow": "";
			rel += noopener ? " noopener": "";
			rel += noreferrer ? " noreferrer": "";
			
			const title_url = (type === "url" && url) || (type === "menu" && urlObj.menu) || ( (type === "page" && !!urlObj.page)  && "index.php/component/jpagebuilder/index.php?option=com_jpagebuilder&view=page&id=" + urlObj.page) || "";

			if(title_url) { #>';
		$output .= $lodash->color ( 'color', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.color' );
		$output .= $lodash->color ( 'background-color', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.background' );
		$output .= $lodash->border ( 'border-color', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.border_color' );
		$output .= $lodash->border ( 'border-style', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.border_style' );
		$output .= $lodash->unit ( 'width', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.width', 'px' );
		$output .= $lodash->unit ( 'height', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.height', 'px' );
		$output .= $lodash->unit ( 'border-width', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.border_width', 'px' );
		$output .= $lodash->unit ( 'font-size', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'data.size', 'px' );
		$output .= $lodash->unit ( 'border-radius', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.border_radius', 'px' );
		$output .= $lodash->spacing ( 'padding', '.jpb-icons-group-list li#icon-{{icon_id}} a', 'addon_item.padding' );
		$output .= $lodash->color ( 'color', '.jpb-icons-group-list li#icon-{{icon_id}} a:hover', 'addon_item.hover_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-icons-group-list li#icon-{{icon_id}} a:hover', 'addon_item.hover_background' );
		$output .= $lodash->border ( 'border-color', '.jpb-icons-group-list li#icon-{{icon_id}} a:hover', 'addon_item.hover_border_color' );
		$output .= '<# }} else {
		#>';
		$output .= $lodash->color ( 'color', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.color' );
		$output .= $lodash->color ( 'background-color', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.background' );
		$output .= $lodash->border ( 'border-color', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.border_color' );
		$output .= $lodash->border ( 'border-style', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.border_style' );
		$output .= $lodash->unit ( 'width', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.width', 'px' );
		$output .= $lodash->unit ( 'height', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.height', 'px' );
		$output .= $lodash->unit ( 'border-width', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.border_width', 'px' );
		$output .= $lodash->unit ( 'font-size', '.jpb-icons-group-list li#icon-{{icon_id}}', 'data.size', 'px' );
		$output .= $lodash->unit ( 'border-radius', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.border_radius', 'px' );
		$output .= $lodash->spacing ( 'padding', '.jpb-icons-group-list li#icon-{{icon_id}}', 'addon_item.padding' );
		$output .= $lodash->color ( 'color', '.jpb-icons-group-list li#icon-{{icon_id}}:hover', 'addon_item.hover_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-icons-group-list li#icon-{{icon_id}}:hover', 'addon_item.hover_background' );
		$output .= $lodash->border ( 'border-color', '.jpb-icons-group-list li#icon-{{icon_id}}:hover', 'addon_item.hover_border_color' );
		$output .= '<# } #>';
		// label
		$output .= $lodash->unit ( 'font-size', '.jpb-icons-group-list li#icon-{{icon_id}} .jpb-icons-label-text', 'addon_item.label_size', 'px' );
		$output .= $lodash->unit ( 'line-height', '.jpb-icons-group-list li#icon-{{icon_id}} .jpb-icons-label-text', 'addon_item.label_lineheight', 'px' );
		$output .= $lodash->unit ( 'letter-spacing', '.jpb-icons-group-list li#icon-{{icon_id}} .jpb-icons-label-text', 'addon_item.label_letterspace', '', false );
		$output .= $lodash->unit ( 'font-weight', '.jpb-icons-group-list li#icon-{{icon_id}} .jpb-icons-label-text', 'addon_item.label_font_style?.weight', '', false );
		$output .= $lodash->spacing ( 'margin', '.jpb-icons-group-list li#icon-{{icon_id}} .jpb-icons-label-text', 'addon_item.label_margin' );
		$output .= $lodash->typography ( '.jpb-icons-group-list li#icon-{{icon_id}} .jpb-icons-label-text', 'addon_item.label_typography', [ 
				'size' => 'addon_item.label_size',
				'line_height' => 'addon_item.label_lineheight',
				'letter_spacing' => 'addon_item.label_letterspace',
				'uppercase' => 'addon_item.label_font_style?.uppercase',
				'italic' => 'addon_item.label_font_style?.italic',
				'underline' => 'addon_item.label_font_style?.underline',
				'weight' => 'addon_item.label_font_style?.weight'
		] );
		$output .= $lodash->generateTransformCss ( '.jpb-icons-group-list', 'data.transform' );
		$output .= ' <# }) #>
		
		
        </style>

            <#
                let contentClass = (!_.isEmpty(data.class) && data.class) ? data.class : "";
                let icon_items = (!_.isEmpty(data.jp_icons_group_item) && data.jp_icons_group_item) ? data.jp_icons_group_item : "";
                let alignment = (!_.isEmpty(data.icon_alignment) && data.icon_alignment) ? \' \' + data.icon_alignment : "";
            #>
                <div class="jpb-addon jpb-addon-icons-group {{contentClass}} {{(data.title_position ? "icons-group-title-postion-"+data.title_position : "")}}">

                <#
                let heading_selector = data.heading_selector || "h2";
				if (!_.isEmpty(data.title)) {
                #>
                <{{ heading_selector }} class="jpb-addon-title">
                <#
                let icon_title_arr = (typeof data.title_icon !== "undefined" && data.title_icon) ? data.title_icon.split(" ") : "";
                let icon_title_name = icon_title_arr.length === 1 ? "fa "+data.title_icon : data.title_icon;

                if(data.title_icon && data.title_icon_position == "before"){ #><span class="{{ icon_title_name }}"></span> <# } #>
                    <span class="jp-inline-editable-element" data-id={{data.id}} data-fieldName="title" contenteditable="true">{{{ data.title }}}</span>
                <# if(data.title_icon && data.title_icon_position == "after"){ #> <span class="{{ icon_title_name }}"></span><# } #>
                </{{ heading_selector }}>
				<# } #>	
                <ul class="jpb-icons-group-list">
                <# _.each (icon_items, function(icon_item, key) {
                    key ++;
                    let icon_class = (!_.isEmpty(icon_item.icon_class) && icon_item.icon_class !== "") ? icon_item.icon_class : " ";
                    let icon_id = data.id + key;
                #>

                    <li id="icon-{{icon_id}}" class="{{icon_class}}">

					<#
					const {icon_link} = icon_item;
					const isUrlObject_title = _.isObject(icon_link) && (!!icon_link.url || !!icon_link.menu || !!icon_link.page);
					const isUrlString = _.isString(icon_link) && icon_link !== "";
					const isUrlString_title = _.isString(data.title_link) && data.title_link !== "";
					
					if(isUrlObject_title || isUrlString_title || isUrlString){

					    const urlObj = icon_link?.url ? icon_link : window.getSiteUrl(icon_link, icon_item.link_open_new_window);
						const {url, new_tab, nofollow, noopener, noreferrer, type} = urlObj;
                        const target = new_tab ? "_blank" : "";

						let rel = "";
						rel += nofollow ? "nofollow": "";
						rel += noopener ? " noopener": "";
						rel += noreferrer ? " noreferrer": "";
						
						const title_url = (type === "url" && url) || (type === "menu" && urlObj.menu) || ( (type === "page" && !!urlObj.page)  && "index.php/component/jpagebuilder/index.php?option=com_jpagebuilder&view=page&id=" + urlObj.page) || "";
                    	#>
				      <# if(title_url) { #>
						 <a href=\'{{title_url}}\' target="{{target}}" rel=\'{{rel}}\'>
						<# } #>
                    <# } #>

					<#
                    if (!_.isEmpty(icon_item.label_position) && icon_item.show_label !== 0 && icon_item.label_position == "top") {
                    #>
                        <span class="jpb-icons-label-text">{{icon_item.label_text}}</span>
                    <# }
                    if (!_.isEmpty(icon_item.icon_name)) {
                        let icon_arr2 = (typeof icon_item.icon_name !== "undefined" && icon_item.icon_name) ? icon_item.icon_name.split(" ") : "";
                        let icon_name2 = icon_arr2.length === 1 ? "fa "+icon_item.icon_name : icon_item.icon_name;
						let icon_title = icon_item.title ? icon_item.title : icon_name2;
                    #>
                        <i class="{{icon_name2}}" title="{{icon_item.title}}"></i>
						<span class="jpb-form-label-visually-hidden">{{ icon_title }}</span>
                    <# }
                    if (!_.isEmpty(icon_item.label_position) && icon_item.show_label !== 0 && icon_item.label_position == "right") {
                    #>
                        <span class="jpb-icons-label-text right">{{icon_item.label_text}}</span>
                    <# }
                    if (!_.isEmpty(icon_item.label_position) && icon_item.show_label !== 0 && icon_item.label_position == "bottom") {
                    #>
                        <span class="jpb-icons-label-text">{{icon_item.label_text}}</span>
                    <# }
                    if (icon_item.icon_link) {
                    #>
                        </a>
                    <# } #>

                    </li>
                <# }) #>
                </ul>
                </div>
                ';
		return $output;
	}
}
