<?php
defined( 'ABSPATH' ) || exit;

/**
 * Plugin settings and defaults.
 */
class AWP_Settings {

	const OPTION_KEY = 'awp_slider_settings';

	/**
	 * Singleton.
	 *
	 * @var AWP_Settings|null
	 */
	private static $instance = null;

	/**
	 * @return AWP_Settings
	 */
	public static function get_instance() {
		if ( null === self::$instance ) {
			self::$instance = new self();
		}
		return self::$instance;
	}

	/**
	 * Hook registration.
	 */
	public function init() {
		add_action( 'admin_init', array( $this, 'register_settings' ) );
		add_action( 'admin_menu', array( $this, 'register_menu' ), 20 );
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_assets' ) );
	}

	/**
	 * Default settings.
	 *
	 * @return array
	 */
	public static function defaults() {
		return array(
			'autoplay'           => 1,
			'autoplay_delay'     => 4000,
			'loop'               => 1,
			'speed'              => 600,
			'effect'             => 'slide',
			'slides_per_view'    => 1,
			'slides_per_view_tablet' => 1,
			'slides_per_view_mobile' => 1,
			'space_between'      => 0,
			'centered_slides'    => 0,
			'pause_on_hover'     => 1,
			'keyboard'           => 1,
			'grab_cursor'        => 1,
			'show_arrows'        => 1,
			'show_pagination'    => 1,
			'pagination_type'    => 'bullets',
			'slide_height'       => 420,
			'content_align'      => 'center',
			'overlay_opacity'    => 40,
			'color_heading'      => '#ffffff',
			'color_text'         => '#f3f4f6',
			'color_btn_bg'       => '#111827',
			'color_btn_text'     => '#ffffff',
			'color_btn_hover_bg' => '#2563eb',
			'color_btn_hover_text' => '#ffffff',
			'color_arrow'        => '#ffffff',
			'color_arrow_bg'     => 'rgba(17,24,39,0.55)',
			'color_arrow_hover'  => '#ffffff',
			'color_dot'          => 'rgba(255,255,255,0.45)',
			'color_dot_active'   => '#ffffff',
			'color_overlay'      => '#0f172a',
			'btn_radius'         => 6,
			'btn_padding_y'      => 10,
			'btn_padding_x'      => 18,
			'arrow_size'         => 44,
		);
	}

	/**
	 * Get merged settings.
	 *
	 * @return array
	 */
	public static function get() {
		$stored = get_option( self::OPTION_KEY, array() );
		if ( ! is_array( $stored ) ) {
			$stored = array();
		}
		return wp_parse_args( $stored, self::defaults() );
	}

	/**
	 * Get a single setting.
	 *
	 * @param string $key Setting key.
	 * @param mixed  $fallback Fallback.
	 * @return mixed
	 */
	public static function get_value( $key, $fallback = null ) {
		$settings = self::get();
		if ( array_key_exists( $key, $settings ) ) {
			return $settings[ $key ];
		}
		return $fallback;
	}

	/**
	 * Register settings.
	 */
	public function register_settings() {
		register_setting(
			'awp_slider_settings_group',
			self::OPTION_KEY,
			array(
				'type'              => 'array',
				'sanitize_callback' => array( $this, 'sanitize' ),
				'default'           => self::defaults(),
			)
		);
	}

	/**
	 * Sanitize settings array.
	 *
	 * @param array $input Raw input.
	 * @return array
	 */
	public function sanitize( $input ) {
		$defaults = self::defaults();
		$output   = $defaults;

		if ( ! is_array( $input ) ) {
			return $output;
		}

		$checkboxes = array(
			'autoplay',
			'loop',
			'centered_slides',
			'pause_on_hover',
			'keyboard',
			'grab_cursor',
			'show_arrows',
			'show_pagination',
		);

		foreach ( $checkboxes as $key ) {
			$output[ $key ] = ! empty( $input[ $key ] ) ? 1 : 0;
		}

		$output['autoplay_delay'] = absint( $input['autoplay_delay'] ?? $defaults['autoplay_delay'] );
		$output['speed']          = absint( $input['speed'] ?? $defaults['speed'] );
		$output['space_between']  = absint( $input['space_between'] ?? $defaults['space_between'] );
		$output['slide_height']   = absint( $input['slide_height'] ?? $defaults['slide_height'] );
		$output['overlay_opacity'] = min( 100, absint( $input['overlay_opacity'] ?? $defaults['overlay_opacity'] ) );
		$output['btn_radius']     = absint( $input['btn_radius'] ?? $defaults['btn_radius'] );
		$output['btn_padding_y']  = absint( $input['btn_padding_y'] ?? $defaults['btn_padding_y'] );
		$output['btn_padding_x']  = absint( $input['btn_padding_x'] ?? $defaults['btn_padding_x'] );
		$output['arrow_size']     = absint( $input['arrow_size'] ?? $defaults['arrow_size'] );

		$output['slides_per_view']        = max( 1, floatval( $input['slides_per_view'] ?? 1 ) );
		$output['slides_per_view_tablet'] = max( 1, floatval( $input['slides_per_view_tablet'] ?? 1 ) );
		$output['slides_per_view_mobile'] = max( 1, floatval( $input['slides_per_view_mobile'] ?? 1 ) );

		$effects = array( 'slide', 'fade', 'cube', 'coverflow', 'flip' );
		$effect  = sanitize_key( $input['effect'] ?? 'slide' );
		$output['effect'] = in_array( $effect, $effects, true ) ? $effect : 'slide';

		$pagination_types = array( 'bullets', 'fraction', 'progressbar' );
		$pagination       = sanitize_key( $input['pagination_type'] ?? 'bullets' );
		$output['pagination_type'] = in_array( $pagination, $pagination_types, true ) ? $pagination : 'bullets';

		$aligns = array( 'left', 'center', 'right' );
		$align  = sanitize_key( $input['content_align'] ?? 'center' );
		$output['content_align'] = in_array( $align, $aligns, true ) ? $align : 'center';

		$colors = array(
			'color_heading',
			'color_text',
			'color_btn_bg',
			'color_btn_text',
			'color_btn_hover_bg',
			'color_btn_hover_text',
			'color_arrow',
			'color_arrow_hover',
			'color_dot_active',
			'color_overlay',
		);

		foreach ( $colors as $color_key ) {
			$color = sanitize_hex_color( $input[ $color_key ] ?? '' );
			$output[ $color_key ] = $color ? $color : $defaults[ $color_key ];
		}

		// Allow rgba strings for arrow bg / inactive dots.
		$output['color_arrow_bg'] = $this->sanitize_color_value( $input['color_arrow_bg'] ?? $defaults['color_arrow_bg'], $defaults['color_arrow_bg'] );
		$output['color_dot']      = $this->sanitize_color_value( $input['color_dot'] ?? $defaults['color_dot'], $defaults['color_dot'] );

		return $output;
	}

	/**
	 * Sanitize hex or rgba color.
	 *
	 * @param string $value Raw.
	 * @param string $fallback Fallback.
	 * @return string
	 */
	private function sanitize_color_value( $value, $fallback ) {
		$value = trim( (string) $value );
		$hex   = sanitize_hex_color( $value );
		if ( $hex ) {
			return $hex;
		}
		if ( preg_match( '/^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*(0|1|0?\.\d+))?\s*\)$/', $value ) ) {
			return $value;
		}
		return $fallback;
	}

	/**
	 * Settings submenu.
	 */
	public function register_menu() {
		add_submenu_page(
			'edit.php?post_type=awp-slider',
			__( 'Slider Settings', 'advance-wp-slider' ),
			__( 'Settings', 'advance-wp-slider' ),
			'manage_options',
			'awp-slider-settings',
			array( $this, 'render_page' )
		);
	}

	/**
	 * Admin color picker assets.
	 *
	 * @param string $hook Hook suffix.
	 */
	public function enqueue_admin_assets( $hook ) {
		if ( 'awp-slider_page_awp-slider-settings' !== $hook ) {
			return;
		}
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );
		wp_add_inline_script(
			'wp-color-picker',
			"jQuery(function($){ $('.awp-color-field').wpColorPicker(); });"
		);
	}

	/**
	 * Render settings page.
	 */
	public function render_page() {
		if ( ! current_user_can( 'manage_options' ) ) {
			return;
		}

		$tab      = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : 'carousel'; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
		$settings = self::get();
		$base_url = admin_url( 'edit.php?post_type=awp-slider&page=awp-slider-settings' );
		$tabs     = array(
			'carousel' => __( 'Carousel', 'advance-wp-slider' ),
			'colors'   => __( 'Colors', 'advance-wp-slider' ),
			'help'     => __( 'Help', 'advance-wp-slider' ),
		);
		?>
		<div class="wrap">
			<h1><?php esc_html_e( 'AWP Slider Settings', 'advance-wp-slider' ); ?></h1>
			<nav class="nav-tab-wrapper">
				<?php foreach ( $tabs as $key => $label ) : ?>
					<a class="nav-tab <?php echo $tab === $key ? 'nav-tab-active' : ''; ?>" href="<?php echo esc_url( add_query_arg( 'tab', $key, $base_url ) ); ?>">
						<?php echo esc_html( $label ); ?>
					</a>
				<?php endforeach; ?>
			</nav>

			<?php if ( 'help' === $tab ) : ?>
				<div class="card" style="max-width:720px;padding:16px;margin-top:16px;">
					<h2><?php esc_html_e( 'How to use', 'advance-wp-slider' ); ?></h2>
					<ol>
						<li><?php esc_html_e( 'Create slides under AWP Sliders (title, content, featured image, button).', 'advance-wp-slider' ); ?></li>
						<li><?php esc_html_e( 'Paste the shortcode [AWP-SLIDER] into any page or post.', 'advance-wp-slider' ); ?></li>
						<li><?php esc_html_e( 'Or use the AWP Slider widget in Elementor (CPT or custom slides).', 'advance-wp-slider' ); ?></li>
						<li><?php esc_html_e( 'Tune global carousel and colors here; Elementor can override per widget.', 'advance-wp-slider' ); ?></li>
					</ol>
					<p><code>[AWP-SLIDER]</code></p>
				</div>
			<?php else : ?>
				<form method="post" action="options.php" style="margin-top:16px;">
					<?php settings_fields( 'awp_slider_settings_group' ); ?>
					<?php if ( 'carousel' === $tab ) : ?>
						<table class="form-table" role="presentation">
							<tr>
								<th><?php esc_html_e( 'Autoplay', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[autoplay]" value="1" <?php checked( $settings['autoplay'], 1 ); ?> /> <?php esc_html_e( 'Enable autoplay', 'advance-wp-slider' ); ?></label></td>
							</tr>
							<tr>
								<th><label for="awp_autoplay_delay"><?php esc_html_e( 'Autoplay delay (ms)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="1000" step="100" id="awp_autoplay_delay" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[autoplay_delay]" value="<?php echo esc_attr( $settings['autoplay_delay'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><?php esc_html_e( 'Loop', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[loop]" value="1" <?php checked( $settings['loop'], 1 ); ?> /> <?php esc_html_e( 'Infinite loop', 'advance-wp-slider' ); ?></label></td>
							</tr>
							<tr>
								<th><label for="awp_speed"><?php esc_html_e( 'Transition speed (ms)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="100" step="50" id="awp_speed" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[speed]" value="<?php echo esc_attr( $settings['speed'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_effect"><?php esc_html_e( 'Effect', 'advance-wp-slider' ); ?></label></th>
								<td>
									<select id="awp_effect" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[effect]">
										<?php foreach ( array( 'slide', 'fade', 'cube', 'coverflow', 'flip' ) as $effect ) : ?>
											<option value="<?php echo esc_attr( $effect ); ?>" <?php selected( $settings['effect'], $effect ); ?>><?php echo esc_html( ucfirst( $effect ) ); ?></option>
										<?php endforeach; ?>
									</select>
								</td>
							</tr>
							<tr>
								<th><label for="awp_spv"><?php esc_html_e( 'Slides per view (desktop)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="1" step="0.1" id="awp_spv" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[slides_per_view]" value="<?php echo esc_attr( $settings['slides_per_view'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_spv_t"><?php esc_html_e( 'Slides per view (tablet)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="1" step="0.1" id="awp_spv_t" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[slides_per_view_tablet]" value="<?php echo esc_attr( $settings['slides_per_view_tablet'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_spv_m"><?php esc_html_e( 'Slides per view (mobile)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="1" step="0.1" id="awp_spv_m" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[slides_per_view_mobile]" value="<?php echo esc_attr( $settings['slides_per_view_mobile'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_gap"><?php esc_html_e( 'Space between (px)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="0" id="awp_gap" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[space_between]" value="<?php echo esc_attr( $settings['space_between'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><?php esc_html_e( 'Centered slides', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[centered_slides]" value="1" <?php checked( $settings['centered_slides'], 1 ); ?> /> <?php esc_html_e( 'Center active slide', 'advance-wp-slider' ); ?></label></td>
							</tr>
							<tr>
								<th><?php esc_html_e( 'Pause on hover', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[pause_on_hover]" value="1" <?php checked( $settings['pause_on_hover'], 1 ); ?> /></label></td>
							</tr>
							<tr>
								<th><?php esc_html_e( 'Keyboard control', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[keyboard]" value="1" <?php checked( $settings['keyboard'], 1 ); ?> /></label></td>
							</tr>
							<tr>
								<th><?php esc_html_e( 'Grab cursor', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[grab_cursor]" value="1" <?php checked( $settings['grab_cursor'], 1 ); ?> /></label></td>
							</tr>
							<tr>
								<th><?php esc_html_e( 'Show arrows', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[show_arrows]" value="1" <?php checked( $settings['show_arrows'], 1 ); ?> /></label></td>
							</tr>
							<tr>
								<th><?php esc_html_e( 'Show pagination', 'advance-wp-slider' ); ?></th>
								<td><label><input type="checkbox" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[show_pagination]" value="1" <?php checked( $settings['show_pagination'], 1 ); ?> /></label></td>
							</tr>
							<tr>
								<th><label for="awp_pagination"><?php esc_html_e( 'Pagination type', 'advance-wp-slider' ); ?></label></th>
								<td>
									<select id="awp_pagination" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[pagination_type]">
										<option value="bullets" <?php selected( $settings['pagination_type'], 'bullets' ); ?>><?php esc_html_e( 'Bullets', 'advance-wp-slider' ); ?></option>
										<option value="fraction" <?php selected( $settings['pagination_type'], 'fraction' ); ?>><?php esc_html_e( 'Fraction', 'advance-wp-slider' ); ?></option>
										<option value="progressbar" <?php selected( $settings['pagination_type'], 'progressbar' ); ?>><?php esc_html_e( 'Progress bar', 'advance-wp-slider' ); ?></option>
									</select>
								</td>
							</tr>
							<tr>
								<th><label for="awp_height"><?php esc_html_e( 'Slide height (px)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="200" id="awp_height" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[slide_height]" value="<?php echo esc_attr( $settings['slide_height'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_align"><?php esc_html_e( 'Content alignment', 'advance-wp-slider' ); ?></label></th>
								<td>
									<select id="awp_align" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[content_align]">
										<option value="left" <?php selected( $settings['content_align'], 'left' ); ?>><?php esc_html_e( 'Left', 'advance-wp-slider' ); ?></option>
										<option value="center" <?php selected( $settings['content_align'], 'center' ); ?>><?php esc_html_e( 'Center', 'advance-wp-slider' ); ?></option>
										<option value="right" <?php selected( $settings['content_align'], 'right' ); ?>><?php esc_html_e( 'Right', 'advance-wp-slider' ); ?></option>
									</select>
								</td>
							</tr>
							<tr>
								<th><label for="awp_overlay"><?php esc_html_e( 'Overlay opacity (%)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="0" max="100" id="awp_overlay" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[overlay_opacity]" value="<?php echo esc_attr( $settings['overlay_opacity'] ); ?>" class="small-text" /></td>
							</tr>
						</table>
					<?php else : ?>
						<table class="form-table" role="presentation">
							<?php
							$color_fields = array(
								'color_heading'        => __( 'Heading color', 'advance-wp-slider' ),
								'color_text'           => __( 'Text color', 'advance-wp-slider' ),
								'color_btn_bg'         => __( 'Button background', 'advance-wp-slider' ),
								'color_btn_text'       => __( 'Button text', 'advance-wp-slider' ),
								'color_btn_hover_bg'   => __( 'Button hover background', 'advance-wp-slider' ),
								'color_btn_hover_text' => __( 'Button hover text', 'advance-wp-slider' ),
								'color_arrow'          => __( 'Arrow color', 'advance-wp-slider' ),
								'color_arrow_bg'       => __( 'Arrow background', 'advance-wp-slider' ),
								'color_arrow_hover'    => __( 'Arrow hover color', 'advance-wp-slider' ),
								'color_dot'            => __( 'Pagination inactive', 'advance-wp-slider' ),
								'color_dot_active'     => __( 'Pagination active', 'advance-wp-slider' ),
								'color_overlay'        => __( 'Overlay color', 'advance-wp-slider' ),
							);
							foreach ( $color_fields as $key => $label ) :
								?>
								<tr>
									<th><label for="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label></th>
									<td><input type="text" class="awp-color-field" id="<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[<?php echo esc_attr( $key ); ?>]" value="<?php echo esc_attr( $settings[ $key ] ); ?>" /></td>
								</tr>
							<?php endforeach; ?>
							<tr>
								<th><label for="awp_btn_radius"><?php esc_html_e( 'Button radius (px)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="0" id="awp_btn_radius" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[btn_radius]" value="<?php echo esc_attr( $settings['btn_radius'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_btn_py"><?php esc_html_e( 'Button padding Y (px)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="0" id="awp_btn_py" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[btn_padding_y]" value="<?php echo esc_attr( $settings['btn_padding_y'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_btn_px"><?php esc_html_e( 'Button padding X (px)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="0" id="awp_btn_px" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[btn_padding_x]" value="<?php echo esc_attr( $settings['btn_padding_x'] ); ?>" class="small-text" /></td>
							</tr>
							<tr>
								<th><label for="awp_arrow_size"><?php esc_html_e( 'Arrow size (px)', 'advance-wp-slider' ); ?></label></th>
								<td><input type="number" min="24" id="awp_arrow_size" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[arrow_size]" value="<?php echo esc_attr( $settings['arrow_size'] ); ?>" class="small-text" /></td>
							</tr>
						</table>
					<?php endif; ?>

					<?php
					// Preserve other tab values as hidden fields.
					$preserve = ( 'carousel' === $tab )
						? array( 'color_heading', 'color_text', 'color_btn_bg', 'color_btn_text', 'color_btn_hover_bg', 'color_btn_hover_text', 'color_arrow', 'color_arrow_bg', 'color_arrow_hover', 'color_dot', 'color_dot_active', 'color_overlay', 'btn_radius', 'btn_padding_y', 'btn_padding_x', 'arrow_size' )
						: array( 'autoplay', 'autoplay_delay', 'loop', 'speed', 'effect', 'slides_per_view', 'slides_per_view_tablet', 'slides_per_view_mobile', 'space_between', 'centered_slides', 'pause_on_hover', 'keyboard', 'grab_cursor', 'show_arrows', 'show_pagination', 'pagination_type', 'slide_height', 'content_align', 'overlay_opacity' );

					foreach ( $preserve as $key ) :
						?>
						<input type="hidden" name="<?php echo esc_attr( self::OPTION_KEY ); ?>[<?php echo esc_attr( $key ); ?>]" value="<?php echo esc_attr( $settings[ $key ] ); ?>" />
					<?php endforeach; ?>

					<?php submit_button( __( 'Save Settings', 'advance-wp-slider' ) ); ?>
				</form>
			<?php endif; ?>
		</div>
		<?php
	}

	/**
	 * Build CSS variables from settings.
	 *
	 * @param array $settings Settings.
	 * @return string
	 */
	public static function css_variables( $settings = null ) {
		$settings = $settings ? wp_parse_args( $settings, self::defaults() ) : self::get();
		$opacity  = max( 0, min( 100, (int) $settings['overlay_opacity'] ) ) / 100;

		$map = array(
			'--awp-heading'         => $settings['color_heading'],
			'--awp-text'            => $settings['color_text'],
			'--awp-btn-bg'          => $settings['color_btn_bg'],
			'--awp-btn-color'       => $settings['color_btn_text'],
			'--awp-btn-hover-bg'    => $settings['color_btn_hover_bg'],
			'--awp-btn-hover-color' => $settings['color_btn_hover_text'],
			'--awp-arrow'           => $settings['color_arrow'],
			'--awp-arrow-bg'        => $settings['color_arrow_bg'],
			'--awp-arrow-hover'     => $settings['color_arrow_hover'],
			'--awp-dot'             => $settings['color_dot'],
			'--awp-dot-active'      => $settings['color_dot_active'],
			'--awp-overlay'         => $settings['color_overlay'],
			'--awp-overlay-opacity' => (string) $opacity,
			'--awp-height'          => absint( $settings['slide_height'] ) . 'px',
			'--awp-btn-radius'      => absint( $settings['btn_radius'] ) . 'px',
			'--awp-btn-py'          => absint( $settings['btn_padding_y'] ) . 'px',
			'--awp-btn-px'          => absint( $settings['btn_padding_x'] ) . 'px',
			'--awp-arrow-size'      => absint( $settings['arrow_size'] ) . 'px',
			'--awp-align'           => $settings['content_align'],
		);

		$parts = array();
		foreach ( $map as $prop => $value ) {
			$parts[] = $prop . ':' . $value;
		}

		return implode( ';', $parts );
	}

	/**
	 * Swiper config payload for JS.
	 *
	 * @param array $settings Settings.
	 * @return array
	 */
	public static function swiper_config( $settings = null ) {
		$settings = $settings ? wp_parse_args( $settings, self::defaults() ) : self::get();

		return array(
			'autoplay'           => (bool) $settings['autoplay'],
			'autoplayDelay'      => (int) $settings['autoplay_delay'],
			'loop'               => (bool) $settings['loop'],
			'speed'              => (int) $settings['speed'],
			'effect'             => $settings['effect'],
			'slidesPerView'      => (float) $settings['slides_per_view'],
			'slidesPerViewTablet'=> (float) $settings['slides_per_view_tablet'],
			'slidesPerViewMobile'=> (float) $settings['slides_per_view_mobile'],
			'spaceBetween'       => (int) $settings['space_between'],
			'centeredSlides'     => (bool) $settings['centered_slides'],
			'pauseOnHover'       => (bool) $settings['pause_on_hover'],
			'keyboard'           => (bool) $settings['keyboard'],
			'grabCursor'         => (bool) $settings['grab_cursor'],
			'showArrows'         => (bool) $settings['show_arrows'],
			'showPagination'     => (bool) $settings['show_pagination'],
			'paginationType'     => $settings['pagination_type'],
		);
	}
}