<?php

require_once( __DIR__ . '/get-theme-styles.php' );

if(!function_exists('flex_get_bg_image')) {

	function flex_get_aq_sizes($width, $height) {
		$w = intval($width);
		$h = intval($height);

		if($h > $w) {
			$res_w = 99999;
			$res_h = $h;
		} else {
			$res_w = $w;
			$res_h = 99999;
		}

		return ['width' => $res_w, 'height' => $res_h];
	}

	function flex_get_bg_image_vars($url, $sizes = array()) {

		$img_vars = "";
		foreach ($sizes as $key => $size) {
			$aq_sizes = flex_get_aq_sizes($size['width'], $size['height']);
			$res_img = flo_aq(
				$url,
				$aq_sizes['width'],
				$aq_sizes['height'],
				$crop = false,
				$force_resize = true
			);
			$img_vars .= "--img-".$key.": url(".$res_img.");";
		}

		return $img_vars;
	}

	function flex_get_bg_image($data, $viewport = "desktop") {

		$element_vars = "";
		$user_data = $data['user_data'];
		$parallax = isset($user_data['enableParallax']) && $user_data['enableParallax'];

		if(isset($user_data['backgroundImage']) && strlen($user_data['backgroundImage']) && !$parallax) {
			/* START: Image Optimization */
				$bg_img_url = $user_data['backgroundImage'];

				// image will go through aq_resize if:
				// 1) if url is not a gif
				// 2) if flex is not on flothemes.com
				// 3) if "Use Original Resolution" option is disabled

				$filename_from_url = parse_url($bg_img_url);
				$ext = pathinfo($filename_from_url['path'], PATHINFO_EXTENSION);
				$originalRes = isset($user_data['originalRes']) && $user_data['originalRes'];

				if($ext !== 'gif' && function_exists('flo_aq') && !$parallax && !$originalRes) {
					$aq_crop = isset($user_data['cropImage']) && $user_data['cropImage'];

					if($viewport === "desktop") {

						$elWidth = $data['elementWidth'];
						$elHeight = $data['elementHeight'];

						$sizes = [
							'tablet' => [
								'width' => $elWidth * 25.6,
								'height' => $elHeight * 25.6
							],
							'desktop' => [
								'width' => $elWidth * 32,
								'height' => $elHeight * 32
							]
						];

						$bg_img_data = flex_get_bg_image_vars($user_data['backgroundImage'], $sizes);

					} else {
						$img_width = floatval($data['elementWidth']) * 32;
						$img_height = floatval($data['elementHeight']) * 32;

						$aq_sizes = flex_get_aq_sizes($img_width, $img_height);
						$bg_img_url = flo_aq(
							$bg_img_url,
							$aq_sizes['width'],
							$aq_sizes['height'],
							$crop = false,
							$force_resize = true
						);
						$bg_img_data = "--img-mobile: url(". $bg_img_url .");";
					}

				} else {

					if($viewport === "desktop") {
						$bg_img_data = "
							--img-tablet: url(". $bg_img_url .");
							--img-desktop: url(". $bg_img_url .");
						";
					} else {
						$bg_img_data = "--img-mobile: url(". $bg_img_url .");";
					}

				}
			/* END: Image Optimization */

			if ( $user_data['cropImage'] ) {
				$element_vars .= "
					--background-size: cover;
					--background-position-x: ".floatval( $user_data['bgPos']['x'] )."%;
					--background-position-y: ".floatval( $user_data['bgPos']['y'] )."%;
				";
			}

			$element_vars .= $bg_img_data;
		}

		return $element_vars;

	}
}

if(!function_exists('flex_get_element_styles')) {
	
	function flexParseNr($val) {
		if($val > 0 && $val < 0.0001) {
			return 0;
		}
		$approx = round($val, 5);
		return $approx;
	}
	
	function flex_get_element_styles($element, $zIndexFromMap = null, $colors = null, $viewport = "desktop", $parentSizePos = null) {
		$general_vars = "";
		$element_vars = "";
		$data = $element['data'];
		$user_data = $data['user_data'];
    $elementWidthPx = $data['elementWidth'] * 16;
    $elementHeightPx = $data['elementHeight'] * 16;
		
		$elementWidthEm = flexParseNr($data['elementWidth']);
		$elementHeightEm = flexParseNr($data['elementHeight']);
		
    $elementWidth = $elementWidthPx == 1 ? $elementWidthPx . "px" : $elementWidthEm . "em";
    $elementHeight = $elementHeightPx == 1 ? $elementHeightPx . "px" : $elementHeightEm . "em";

		if($zIndexFromMap) {
			$elZIndex = $zIndexFromMap;
		} else {
			$elZIndex = $data['zIndex'];
		}

		if($parentSizePos) {
			$posX = $data["posX"] - $parentSizePos["left"];
			$posY = $data["posY"] - $parentSizePos["top"];
		} else {
			$posX = $data["posX"];
			$posY = $data["posY"];
		}
		
		$posX = flexParseNr($posX);
		$posY = flexParseNr($posY);
		$rotateDeg = flexParseNr($data['rotateDeg']);

		$general_vars = "
			--el-width: ".$elementWidth.";
			--el-height: ". $elementHeight.";
			--position-top: ".$posY."em;
			--position-left: ".$posX."em;
			--rotateDeg: ". $rotateDeg ."deg;
			--z-index: ". $elZIndex .";
		";

		if ( $data['user_data']['useBorder'] ) {

			$borderColor = parseColor($user_data['borderColor'], $colors);
			$general_vars .= "
				--border-color: ". $borderColor .";
				--border-width: ". $user_data['borderWidth'] ."px;
			";
		}

		if($data['type'] === 'image') {
			$opacity = isset($user_data['imageOpacity']) ? $user_data['imageOpacity'] / 100 : 1;
			$general_vars .= "opacity: ".$opacity.";";
		}

		$general_vars .= "--border-radius: ". $user_data['borderRadius'] ."px;";

		/* START: BY TYPE */
			switch ($element["data"]["type"]) {
				case 'text':

					/* START: Add Bg Color */
						if ( $user_data['useBg'] ) {
							$backgroundColor = parseColor($user_data['backgroundColor'], $colors);
							$element_vars .= "--backgroundColor: ". $backgroundColor .";";
						}
					/* END: Add Bg Color */

					/* START: Align the text Verticaly */
						$verticalAlign = $user_data['verticalAlign'];
						if (isset($verticalAlign)) {
							$alignment_for_flex = "";
							switch ($verticalAlign) {
								case 'top':
									$alignment_for_flex = "flex-start";
									break;
								case 'middle':
									$alignment_for_flex = "center";
									break;
								case 'bottom':
									$alignment_for_flex = "flex-end";
									break;
								default:
									$alignment_for_flex = "flex-start";
									break;
							}
							$element_vars .= "
								--text-vertical-align: ". $alignment_for_flex .";
							";
						}
					/* END: Align the text Verticaly */

					/* START: Horizontal Text Alignment */
						if(isset($user_data['textAlign'])) {
							$element_vars .= "--text-align: ". $user_data['textAlign'] .";";
						}
					/* END: Horizontal Text Alignment */

					/* START: FONT STUFF */
						if(isset($user_data['fontFamily'])) {
							$element_vars .= "
								--font-family: ". $user_data['fontFamily'] .";
								--font-size: 1em;
							";
						}
					/* END: FONT STUFF */

					/* START: Set Height Auto */
						if ($user_data['heightAuto']) {

							if (isset($user_data['paddings'])) {
								$paddings = $user_data['paddings'];
								$vertical_paddings = $paddings['vertical'] . "em";
								$horizontal_paddings = $paddings['horizontal'] . "em";
							} else {
								$vertical_paddings = 0;
								$horizontal_paddings = 0;
							}

							$element_vars .= "
								--el-height: auto;
								--el-paddings: ".$vertical_paddings." ".$horizontal_paddings.";
							";
						}
					/* END: Set Height Auto */

					break;
				case 'button':
					if ( $user_data['useBg'] ) {
            $backgroundColor = parseColor($user_data['backgroundColor'], $colors);
						$element_vars .= "--backgroundColor: ". $backgroundColor .";";
					}

          $elementColor = parseColor($user_data['elementColor'], $colors);
					$element_vars .= "--button-color: ".$elementColor.";";

					/* START: Horizontal Text Alignment */
						if(isset($user_data['textAlign'])) {
							$element_vars .= "--text-align: ". $user_data['textAlign'] .";";
						}
					/* END: Horizontal Text Alignment */

					/* START: FONT STUFF */
						if(isset($user_data['fontFamily'])) {
							$element_vars .= "
								--font-family: ". $user_data['fontFamily'] .";
								--font-size: 1em;
							";
						}
					/* END: FONT STUFF */

					/* START: BUTTON HOVER STATE */
						$hoverBg = isset($user_data['hoverBg']) ? parseColor($user_data['hoverBg'], $colors) : "";
						$hoverText = isset($user_data['hoverText']) ? parseColor($user_data['hoverText'], $colors) : "";
						$hoverBorder = isset($user_data['hoverBorder']) ? parseColor($user_data['hoverBorder'], $colors) : "";

						$hover_state_data = [
							'--hover-color'            => $hoverText,
							'--hover-border-color'     => $hoverBorder,
							'--hover-background-color' => $hoverBg
						];

						$hover_state_styles = "";
						foreach ($hover_state_data as $cssProp => $cssVal) {
							if($cssVal) {
								$hover_state_styles .= $cssProp.":".$cssVal."; ";
							}
						}
					/* END: BUTTON HOVER STATE */

					break;
				case 'shape':
					if ($user_data['useBg']) {

            $backgroundColor = parseColor($user_data['backgroundColor'], $colors);

            if(isset($user_data['useGradient']) && $user_data['useGradient']) {

							$secondColor = parseColor($user_data['secondBgColor'], $colors);
							$gradientProgression =
                isset($user_data['gradientProgression']) &&
                is_array($user_data['gradientProgression'])
                  ? $user_data['gradientProgression']
                  : [0, 100];

							$element_vars .= "
								--gradient: linear-gradient(to right, ".$backgroundColor." ".$gradientProgression[0]."%, ".$secondColor." ".$gradientProgression[1]."%);
							";
						} else {
							$element_vars .= "
								--backgroundColor: ". $backgroundColor .";
							";
						}
					}
					break;
				case 'image':
					$element_vars .= flex_get_bg_image($data, $viewport);

					break;
				case 'video':
					if(isset($user_data['backgroundImage']) && strlen($user_data['backgroundImage'])) {
						$element_vars .= flex_get_bg_image($data, $viewport);

						if($user_data['playButtonSize']) {
							$element_vars .= "
								--play-button-font-size: ".$user_data['playButtonSize']."px;
							";
						}

						if($user_data['playButtonColor']) {
              $playButtonColor = parseColor($user_data['playButtonColor'], $colors);

							$element_vars .= "
								--play-button-color: ".$playButtonColor.";
							";
						}
					}

					break;
				case 'line':
				if ( $user_data['useBg'] ) {
          $backgroundColor = parseColor($user_data['backgroundColor'], $colors);
          $element_vars .= "
            --backgroundColor: ". $backgroundColor .";
          ";
				}
					break;
				default:
					break;
		}

		$styles = $general_vars . $element_vars;
		if(isset($hover_state_styles) && strlen($hover_state_styles)) {
			$styles .= $hover_state_styles;
		}

    $styles = trim(preg_replace('/\s\s+/', ' ', $styles));
		return $styles;
	}
}

?>
