<?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' );

use Joomla\CMS\Layout\FileLayout;
use Joomla\CMS\Uri\Uri;
class JpagebuilderAddonImage_content 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;
		$class = (isset ( $settings->class ) && $settings->class) ? $settings->class : '';
		$title = (isset ( $settings->title ) && $settings->title) ? $settings->title : '';
		$heading_selector = (isset ( $settings->heading_selector ) && $settings->heading_selector) ? $settings->heading_selector : 'h3';

		// Options
		$image = (isset ( $settings->image ) && $settings->image) ? $settings->image : '';
		$image_src = isset ( $image->src ) ? $image->src : $image;
		$image_alignment = (isset ( $settings->image_alignment ) && $settings->image_alignment) ? $settings->image_alignment : '';
		$aria_label = (isset ( $settings->aria_label ) && $settings->aria_label) ? $settings->aria_label : '';
		$text = (isset ( $settings->text ) && $settings->text) ? $settings->text : '';
		$button_text = (isset ( $settings->button_text ) && $settings->button_text) ? $settings->button_text : '';
		// $button_url = (isset($settings->button_url) && $settings->button_url) ? $settings->button_url : '';
		$button_classes = (isset ( $settings->button_size ) && $settings->button_size) ? ' jpb-btn-' . $settings->button_size : '';
		$button_classes .= (isset ( $settings->button_type ) && $settings->button_type) ? ' jpb-btn-' . $settings->button_type : '';
		$button_classes .= (isset ( $settings->button_shape ) && $settings->button_shape) ? ' jpb-btn-' . $settings->button_shape : ' jpb-btn-rounded';
		$button_classes .= (isset ( $settings->button_appearance ) && $settings->button_appearance) ? ' jpb-btn-' . $settings->button_appearance : '';
		$button_classes .= (isset ( $settings->button_block ) && $settings->button_block) ? ' ' . $settings->button_block : '';
		$button_icon = (isset ( $settings->button_icon ) && $settings->button_icon) ? $settings->button_icon : '';
		$button_icon_position = (isset ( $settings->button_icon_position ) && $settings->button_icon_position) ? $settings->button_icon_position : 'left';
		$button_position = (isset ( $settings->button_position ) && $settings->button_position) ? $settings->button_position : '';
		// $button_attribs = (isset($settings->button_target) && $settings->button_target) ? ' rel="noopener noreferrer" target="' . $settings->button_target . '"' : '';
		// $button_attribs .= (isset($settings->button_url) && $settings->button_url) ? ' href="' . $settings->button_url . '"' : '';

		list ( $buttonLink, $buttonTarget ) = JpagebuilderAddonHelper::parseLink ( $settings, 'button_url', [ 
				'url' => 'button_url',
				'new_tab' => 'button_target'
		] );

		$icon_arr = array_filter ( explode ( ' ', $button_icon ) );

		if (count ( $icon_arr ) === 1) {
			$button_icon = 'fas ' . $button_icon;
		}

		if ($button_icon_position === 'left') {
			$button_text = ($button_icon) ? '<i class="' . $button_icon . '" aria-hidden="true"></i> ' . $button_text : $button_text;
		} else {
			$button_text = ($button_icon) ? $button_text . ' <i class="' . $button_icon . '" aria-hidden="true"></i>' : $button_text;
		}

		$button_output = ! empty ( $button_text ) ? '<a href="' . $buttonLink . '" ' . $buttonTarget . ' id="btn-' . $this->addon->id . '" class="jpb-btn' . $button_classes . '">' . $button_text . '</a>' : '';

		if ($image_alignment === 'left') {
			$content_class = ' jpb-col-sm-offset-6';
		} else {
			$content_class = '';
		}

		if ($image_src && $text) {

			$output = '<div class="jpb-addon jpb-addon-image-content aligment-' . $image_alignment . ' clearfix ' . $class . '">';

			$updated_aria_label = ! empty ( $aria_label ) ? strip_tags ( $aria_label ) : strip_tags ( $title );

			// Image
			if (strpos ( $image_src, 'http://' ) !== false || strpos ( $image_src, 'https://' ) !== false) {
				$output .= '<div class="jpb-image-holder" style="background-image: url(' . $image_src . ');" role="img" aria-label="' . $updated_aria_label . '">';
			} else {
				$output .= '<div class="jpb-image-holder" style="background-image: url(' . Uri::base ( true ) . '/' . $image_src . ');" role="img" aria-label="' . $updated_aria_label . '">';
			}
			$output .= '</div>';

			// Content
			$output .= '<div class="jpb-container">';
			$output .= '<div class="jpb-row">';

			if ($image_alignment === 'left') {
				$output .= '<div class="jpb-col-sm-6"></div>';
			}

			$output .= '<div class="jpb-col-sm-6' . $content_class . '">';
			$output .= '<div class="jpb-content-holder">';
			$output .= ($title) ? '<' . $heading_selector . ' class="jpb-image-content-title jpb-addon-title">' . $title . '</' . $heading_selector . '>' : '';
			$output .= ($text) ? '<p class="jpb-image-content-text">' . $text . '</p>' : '';

			$output .= $button_output;

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

			$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;
		$layout_path = JPATH_ROOT . '/components/com_jpagebuilder/layouts';
		$css_path = new FileLayout ( 'addon.css.button', $layout_path );
		$settings = $this->addon->settings;
		$cssHelper = new JpagebuilderCSSHelper ( $addon_id );
		$css = '';

		$imageContentStyle = $cssHelper->generateStyle ( '.jpb-addon-image-content .jpb-content-holder', $settings, [ 
				'content_padding' => 'padding'
		], false, [ 
				'content_padding' => 'spacing'
		] );
		$textContentTypography = $cssHelper->typography ( '.jpb-image-content-text', $settings, 'text_typography', [ ] );
		$transformCss = $cssHelper->generateTransformStyle ( '.jpb-addon-image-content', $settings, 'transform' );

		$css .= $imageContentStyle;
		$css .= $transformCss;
		$css .= $textContentTypography;
		$css .= $css_path->render ( array (
				'addon_id' => $addon_id,
				'options' => $settings,
				'id' => 'btn-' . $this->addon->id
		) );

		$css .= $cssHelper->generateStyle ( '.jpb-btn', $settings, [ 
				'button_margin_top' => 'margin-top'
		], 'px' );

		return $css;
	}

	/**
	 * 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 = '
		<#
			let content_class = "";
			let img = {}

			if (typeof data.image !== "undefined" && typeof data.image.src !== "undefined") {
				img = data.image
			} else {
				img = {src: data.image}
			}

			if (data.image_alignment == "left") {
				content_class = " jpb-col-sm-offset-6";
			}

			let button_text = data.button_text;
			let icon_arr = (typeof data.button_icon !== "undefined" && data.button_icon) ? data.button_icon.split(" ") : "";
			let icon_name = icon_arr.length === 1 ? "fa "+data.button_icon : data.button_icon;

			if (data.button_icon_position == "left" && data.button_icon) {
				button_text = \'<i class="\' + icon_name + \'"></i> \' + data.button_text;
			} else if(data.button_icon){
				button_text = data.button_text + \' <i class="\' + icon_name + \'"></i>\';
			}

			let button_classes = "";

			if (data.button_size) {
				button_classes = button_classes + " jpb-btn-" + data.button_size;
			}

			if (data.button_type) {
				button_classes = button_classes + " jpb-btn-" + data.button_type;
			}

			if (data.button_shape) {
				button_classes = button_classes + " jpb-btn-" + data.button_shape;
			} else {
				button_classes = button_classes + " jpb-btn-rounded";
			}

			if (data.button_appearance) {
				button_classes = button_classes + " jpb-btn-" + data.button_appearance;
			}
		#>
		<style type="text/css">';

		$output .= $lodash->unit ( 'margin-top', '.jpb-addon-title', 'data.title_margin_top', 'px' );
		$output .= $lodash->unit ( 'margin-bottom', '.jpb-addon-title', 'data.title_margin_bottom', 'px' );

		// image
		$output .= '<# if (img.src.indexOf("https://") == -1 && img.src.indexOf("https://") == -1) { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-image-holder {background-image: url({{ pagebuilder_base + img.src }});}';
		$output .= '<# } else { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-image-holder {background-image: url({{ img.src }});}';
		$output .= '<# } #>';

		// button start
		$buttonTypographyFallbacks = [ 
				'font' => 'data.button_font_family',
				'size' => 'data.button_fontsize',
				'letter_spacing' => 'data.button_letterspace',
				'uppercase' => 'data.button_font_style?.uppercase',
				'italic' => 'data.button_font_style?.italic',
				'underline' => 'data.button_font_style?.underline',
				'weight' => 'data.button_font_style?.weight'
		];
		$output .= $lodash->typography ( '.jpb-btn', 'data.button_typography', $buttonTypographyFallbacks );
		$output .= '<# if (data.button_size == "custom") { #>';
		$output .= $lodash->spacing ( 'padding', '.jpb-btn', 'data.button_padding' );
		$output .= '<# } #>';
		$output .= $lodash->unit ( 'margin-top', '.jpb-btn', 'data.button_margin_top', 'px' );
		$output .= '<# if (data.button_block == "jpb-btn-block") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {display: block;}';
		$output .= '<# } #>';

		// custom style
		$output .= '<# if (data.button_type == "custom") { #>';
		$output .= $lodash->color ( 'color', '.jpb-btn', 'data.button_color' );
		$output .= $lodash->color ( 'color', '.jpb-btn:hover', 'data.button_color_hover' );

		$output .= '<# if (data.button_appearance == "outline") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {background-color: transparent;}';
		$output .= $lodash->unit ( 'border-color', '.jpb-btn', 'data.button_background_color', '', false );
		$output .= $lodash->unit ( 'border-color', '.jpb-btn:hover', 'data.button_background_color_hover', '', false );
		$output .= '<# } else if (data.button_appearance == "gradient") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {border: none;}';
		$output .= $lodash->color ( 'background-color', '.jpb-btn', 'data.button_background_gradient' );
		$output .= $lodash->color ( 'background-color', '.jpb-btn:hover', 'data.button_background_gradient_hover' );
		$output .= '<# } else { #>';
		$output .= $lodash->color ( 'background-color', '.jpb-btn', 'data.button_background_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-btn:hover', 'data.button_background_color_hover' );
		$output .= '<# } #>';
		$output .= '<# } #>';

		// link
		$output .= '<# if (data.button_type == "link") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {padding: 0; border-width: 0; text-decoration: none; border-radius: 0;}';
		$output .= $lodash->color ( 'color', '.jpb-btn', 'data.link_button_color' );
		$output .= $lodash->unit ( 'border-color', '.jpb-btn', 'data.link_button_border_color', '', false );
		$output .= $lodash->unit ( 'border-bottom-width', '.jpb-btn', 'data.link_button_border_width', 'px' );
		$output .= $lodash->unit ( 'padding-bottom', '.jpb-btn', 'data.link_button_padding_bottom', 'px' );
		$output .= $lodash->color ( 'color', '.jpb-btn:hover, .jpb-btn:focus', 'data.link_button_hover_color' );
		$output .= $lodash->unit ( 'border-color', '.jpb-btn:hover, .jpb-btn:focus', 'data.link_button_border_hover_color', '', false );
		$output .= '<# } #>';
		// button end

		// 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 );

		// content
		$output .= $lodash->typography ( '.jpb-image-content-text', 'data.text_typography' );
		$output .= $lodash->spacing ( 'padding', '.jpb-addon-image-content .jpb-content-holder', 'data.content_padding' );
		$output .= $lodash->generateTransformCss ( '.jpb-addon-image-content', 'data.transform' );

		$output .= '
		</style>
		<div class="jpb-addon jpb-addon-image-content aligment-{{ data.image_alignment }} clearfix {{ data.class }}">
			<div class="jpb-image-holder"></div>
			<div class="jpb-container">
				<div class="jpb-row">
					<# if(data.image_alignment == "left") { #>
						<div class="jpb-col-sm-6"></div>
					<# } #>
					<div class="jpb-col-sm-6 {{ content_class }}">
						<div class="jpb-content-holder">
                            <# if (!_.isEmpty(data.title)) { #>
								<{{ data.heading_selector }} class="jpb-image-content-title jpb-addon-title jp-inline-editable-element" data-id={{data.id}} data-fieldName="title" contenteditable="true">{{ data.title }}</{{ data.heading_selector }}>
							<# } #>
                            
							<# if (data.text) { #>
								<div id="addon-text-{{data.id}}" class="jpb-image-content-text jp-editable-content" data-id={{data.id}} data-fieldName="text">{{{ data.text }}}</div>
							<# } #>

						    <# if (button_text) { 
								const isMenuBtn = _.isString(data.button_url?.menu) && data.button_url.type === "menu" && data.button_url?.menu;
								const isPageBtn = _.isString(data.button_url?.page) && data.button_url.type === "page" && data.button_url?.page;
								const isObjectBtn = _.isObject(data.button_url) && ((data.button_url.type === "url" && data.button_url?.url !== "") ||  isMenuBtn || isPageBtn);
								
								let urlObjBtn = {};
								let urlBtn = "";
								let targetBtn= "";
								let relBtn = "";
			
								urlObjBtn = isObjectBtn ? data.button_url : window.getSiteUrl(data.button_url, data.btn_target);
								if(urlObjBtn.type === "url") {	
									urlBtn = urlObjBtn.url;
								}
								if(urlObjBtn.type === "menu") {
									urlBtn = urlObjBtn.menu || "";
								}
								
								if(urlObjBtn.type === "page") {
									urlBtn = urlObjBtn.page ? `index.php?option=com_jpagebuilder&view=page&id=${urlObjBtn.page}` : "";
								}
								targetBtn = urlObjBtn.new_tab ? "_blank": "";
								
								relBtn += urlObjBtn.nofollow ? "nofollow": "";
								relBtn += urlObjBtn.noopener ? " noopener": "";
								relBtn += urlObjBtn.noreferrer ? " noreferrer": "";
							
								#>

                                <a href=\'{{ urlBtn }}\' target=\'{{ targetBtn }}\' rel=\'{{ relBtn }}\' class="jpb-btn {{ button_classes }}">{{{ button_text }}}</a>
							<# } #>
						</div>
					</div>
				</div>
			</div>
		</div>
		';

		return $output;
	}
}
