<?php

namespace DIFL\Server\Modules\BackgroundSwitcherItem;

if (!defined('ABSPATH')) {
	die('Direct access forbidden.');
}

use ET\Builder\FrontEnd\Module\Style;
use ET\Builder\Packages\Module\Layout\Components\StyleCommon\CommonStyle;

trait Styles {

	use \DIFL\Server\Traits\StyleUtil;

	public static function styles($args) {
		$attrs       = $args['attrs'] ?? [];
		$elements    = $args['elements'];
		$settings    = $args['settings'] ?? [];
		$order_class = $args['orderClass'] ?? '';

		$styles = [
			$elements->style(
				[
					'attrName'   => 'module',
					'styleProps' => [
						'disabledOn' => [
							'disabledModuleVisibility' => $settings['disabledModuleVisibility'] ?? null,
						],
					],
				]
			),
		];

		// Per-panel decoration attributes (overlay_bg, content_spacing, title_font) —
		// auto-iterate every attr with a decoration, mirroring module-styles.jsx.
		foreach ($attrs as $attr_name => $value) {
			if ('module' === $attr_name || !isset($value['decoration'])) {
				continue;
			}
			$styles[] = $elements->style(['attrName' => $attr_name]);
		}

		// Font Awesome / ETmodules font support: emit the icon font-family + weight on the
		// glyph (the FA webfont is loaded by Divi core). Without font-family, FA glyphs can't
		// resolve. Keyed off the child's selected icon. Mirrors FAQ / AdvancedBarCounter.
		$font_icon = $attrs['bgsi_icon']['innerContent']['desktop']['value']['font_icon'] ?? null;
		$styles[] = CommonStyle::style([
			'selector'            => "{$order_class} .df_bg_switcher_icon .et-pb-icon",
			'attr'                => $attrs['bgsi_icon']['innerContent'] ?? [],
			'declarationFunction' => function () use ($font_icon) {
				return self::get_font_style($font_icon);
			},
		]);

		// Per-item Icon/Image override: emit this panel's icon color/bg/alignment via native
		// `property` (global-color safe) at a higher-specificity selector (.df_bg_switcher +
		// order class beats the parent's). Each emits nothing when its field is empty, so they
		// apply only when the user sets them.
		$styles[] = CommonStyle::style([
			'selector' => ".df_bg_switcher {$order_class} .df_bg_switcher_icon .et-pb-icon",
			'attr'     => $attrs['icon_override_color']['innerContent'] ?? [],
			'property' => 'color',
		]);
		$styles[] = CommonStyle::style([
			'selector' => ".df_bg_switcher {$order_class} .df_bg_switcher_icon",
			'attr'     => $attrs['icon_override_bg']['innerContent'] ?? [],
			'property' => 'background-color',
		]);
		// Per-item Icon/Image Alignment override → position the fit-content icon box via
		// auto margins. Value is the group-item's left/center/right string directly. Keep
		// IN SYNC with module-styles.jsx iconAlignOverrideDeclaration() + the parent.
		$styles[] = CommonStyle::style([
			'selector'            => ".df_bg_switcher {$order_class} .df_bg_switcher_icon",
			'attr'                => $attrs['icon_override_alignment']['innerContent'] ?? [],
			'declarationFunction' => function ($props) {
				$v   = $props['attrValue'] ?? '';
				$map = [
					'left'   => 'margin-left:0;margin-right:auto;',
					'center' => 'margin-left:auto;margin-right:auto;',
					'right'  => 'margin-left:auto;margin-right:0;',
				];
				return is_string($v) && isset($map[$v]) ? $map[$v] : '';
			},
		]);

		// Active Item Color (Design → Item Style): override the parent's active panel border
		// color for THIS panel. Set the resolved var on the panel (property mode = global-color
		// safe; the panel's own var beats the parent's switcher-level var), and apply the border
		// via the var so it works even if the parent's active color is unset. Both emits skip
		// automatically when the field is empty. Keep IN SYNC with module-styles.jsx.
		$active_item_color = $attrs['active_item_color']['innerContent'] ?? [];
		$styles[] = CommonStyle::style([
			'selector' => "{$order_class} .df_bg_switcher_item",
			'attr'     => $active_item_color,
			'property' => '--bgs-active-border-color',
		]);
		$styles[] = CommonStyle::style([
			'selector'            => ".df_bg_switcher:not(.df_bg_switcher--progress-active) {$order_class} .df_bg_switcher_item.is-active .df_bg_switcher_panel",
			'attr'                => $active_item_color,
			'declarationFunction' => function ($props) {
				$v = $props['attrValue'] ?? '';
				return ('' !== $v && null !== $v) ? 'border-color: var(--bgs-active-border-color) !important;' : '';
			},
		]);

		Style::add(
			[
				'id'            => $args['id'],
				'name'          => $args['name'],
				'orderIndex'    => $args['orderIndex'],
				'storeInstance' => $args['storeInstance'],
				'styles'        => $styles,
			]
		);
	}
}
