<?php
/**
 * Customizer fields for preloader settings.
 *
 * @package Eronex
 * @since   0.0.1
 */

use Kirki\Field\Background;
use Kirki\Field\Code;
use Kirki\Field\Color;
use Kirki\Field\Dimension;
use Kirki\Field\Image;
use Kirki\Field\Number;
use Kirki\Field\Select;
use Kirki\Pro\Field\Divider;
use Kirki\Pro\Field\HeadlineToggle;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

new HeadlineToggle(
	array(
		'label'    => esc_html__( 'Preloader', 'eronex' ),
		'settings' => 'eronex_preloader_enable',
		'section'  => 'eronex_general_preloader',
		'default'  => false,
	)
);

new Divider(
	array(
		'settings' => 'eronex_preloader_layout_separator',
		'section'  => 'eronex_general_preloader',
		'choices'  => array(
			'color' => $separator_color,
		),
	),
);

new Select(
	array(
		'label'    => esc_html__( 'Layout', 'eronex' ),
		'settings' => 'eronex_preloader_layout',
		'section'  => 'eronex_general_preloader',
		'default'  => '1',
		'choices'  => array(
			'1'     => esc_html__( 'Style 1', 'eronex' ),
			'2'     => esc_html__( 'Style 2', 'eronex' ),
			'image' => esc_html__( 'Image', 'eronex' ),
		),
	)
);

new Divider(
	array(
		'settings' => 'eronex_preloader_color_separator',
		'section'  => 'eronex_general_preloader',
		'choices'  => array(
			'color' => $separator_color,
		),
		'active_callback' => array(
			array(
				'setting'  => 'eronex_preloader_layout',
				'operator' => '!=',
				'value'    => 'image',
			),
		),
	),
);

new Color(
	array(
		'label'           => esc_html__( 'Loader Color', 'eronex' ),
		'settings'        => 'eronex_preloader_color',
		'section'         => 'eronex_general_preloader',
		'default'         => '',
		'transport'       => 'auto',
		'choices'         => array(
			'alpha' => true,
		),
		'active_callback' => array(
			array(
				'setting'  => 'eronex_preloader_layout',
				'operator' => '!==',
				'value'    => 'image',
			),
		),
		'output'          => array(
			array(
				'element'  => '.eronex-preloader-layout-1 .eronex-preloader::after,.eronex-preloader-layout-1 .eronex-preloader::before',
				'property' => 'background-color',
			),
			array(
				'element'  => '.eronex-preloader-layout-2 .eronex-preloader ',
				'property' => 'color',
			),
		),
	)
);

new Divider(
	array(
		'settings'        => 'eronex_preloader_image_separator',
		'section'         => 'eronex_general_preloader',
		'choices'         => array(
			'color' => $separator_color,
		),
		'active_callback' => array(
			array(
				'setting'  => 'eronex_preloader_layout',
				'operator' => '===',
				'value'    => 'image',
			),
		),
	),
);

new Image(
	array(
		'label'           => esc_html__( 'Loader Image', 'eronex' ),
		'settings'        => 'eronex_preloader_image',
		'section'         => 'eronex_general_preloader',
		'default'         => '',
		'active_callback' => array(
			array(
				'setting'  => 'eronex_preloader_layout',
				'operator' => '==',
				'value'    => 'image',
			),
		),
	)
);

new Dimension(
	array(
		'label'           => esc_html__( 'Image Width', 'eronex' ),
		'settings'        => 'eronex_preloader_width',
		'section'         => 'eronex_general_preloader',
		'transport'       => 'auto',
		'responsive'      => true,
		'default'         => array(
			'desktop' => '',
			'tablet'  => '',
			'mobile'  => '',
		),
		'active_callback' => array(
			array(
				'setting'  => 'eronex_preloader_layout',
				'operator' => '==',
				'value'    => 'image',
			),
		),
		'output'          => array(
			array(
				'element'     => '.eronex-preloader-image',
				'property'    => 'width',
				'media_query' => array(
					'desktop' => $desktop_media_query,
					'tablet'  => $tablet_media_query,
					'mobile'  => $mobile_media_query,
				),
			),
		),
	)
);

new Divider(
	array(
		'settings'        => 'eronex_preloader_bg_separator',
		'section'         => 'eronex_general_preloader',
		'choices'         => array(
			'color' => $separator_color,
		),
	),
);

new Background(
	array(
		'label'     => esc_html__( 'Background', 'eronex' ),
		'settings'  => 'eronex_preloader_bg',
		'section'   => 'eronex_general_preloader',
		'transport' => 'auto',
		'default'   => array(
			'background-color'      => '',
			'background-image'      => '',
			'background-repeat'     => '',
			'background-position'   => '',
			'background-size'       => '',
			'background-attachment' => '',
		),
		'output'    => array(
			array(
				'element' => '.eronex-preloader-wrapper',
			),
		),
	)
);

new Divider(
	array(
		'settings' => 'eronex_preloader_timeout_separator',
		'section'  => 'eronex_general_preloader',
		'choices'  => array(
			'color' => $separator_color,
		),
	),
);

new Number(
	array(
		'label'    => esc_html__( 'Timeout Delay(s)', 'eronex' ),
		'settings' => 'eronex_preloader_timeout',
		'section'  => 'eronex_general_preloader',
		'default'  => 0.3,
		'choices'  => array(
			'min'  => 0.1,
			'max'  => 10,
			'step' => 0.1,
		),
	)
);
