<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Sifency\Traits\Sifency_Addons_Animation_Controls;
use Sifency\Traits\Sifency_Addons_Animation_Manager;
use Sifency\Traits\Sifency_Addons_Master_Typography;
use Sifency\Traits\Sifency_Addons_Item_Style_Controls;
use Sifency\Traits\Sifency_Addons_Flex_Controls;
use Sifency\Traits\Sifency_Addons_Section_Header;
use Sifency\Traits\Sifency_Addons_Help_Controls;
use Sifency\Classes\Sifency_Addons_Widget_Base;

class Sifency_Vertical_Progress extends Sifency_Addons_Widget_Base {

	use Sifency_Addons_Master_Typography;
	use Sifency_Addons_Item_Style_Controls;
	use Sifency_Addons_Animation_Controls;
	use Sifency_Addons_Flex_Controls;
	use Sifency_Addons_Section_Header;
	use Sifency_Addons_Help_Controls;
	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-vertical-progress',
			'title'          => 'Sifency Vertical Progress',
			'icon'           => 'eicon-skill-bar',
			'category'       => array( 'sifency-addons-widgets' ),
			'style_depends'  => array( 'sifency-vprog-style' ),
			'script_depends' => array( 'sifency-vertical-progressbar-script' ),
			'keywords'       => array( 'vertical', 'progress', 'bar', 'skill', 'percentage' ),
		);}

	protected function register_controls() {
		$this->add_sifency_addons_section_header_controls();
		$this->start_controls_section(
			'section_content',
			array(
				'label' => esc_html__( 'Progress Bars', 'sifency-addons' ),
			)
		);

		$this->add_control(
			'skin',
			array(
				'label'        => 'Layout Skin',
				'type'         => Controls_Manager::SELECT,
				'default'      => 'chart',
				'options'      => array(
					'chart'    => 'Chart (Screenshot Style)',
					'tooltip'  => 'Floating Tooltip',
					'internal' => 'Internal Content',
				),
				'prefix_class' => 'sifency-vprog-skin-',
			)
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'title',
			array(
				'label'   => 'Title',
				'type'    => Controls_Manager::TEXT,
				'default' => 'Skill',
			)
		);

		$repeater->add_control(
			'percent',
			array(
				'label'   => 'Percentage',
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'px' => array(
						'min' => 0,
						'max' => 100,
					),
				),
				'default' => array( 'size' => 50 ),
			)
		);

		$repeater->add_control(
			'bar_color',
			array(
				'label'     => 'Custom Color',
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}} .sifency-vprog-fill' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'items',
			array(
				'label'       => 'Items',
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'title'   => 'SUN',
						'percent' => array( 'size' => 35 ),
					),
					array(
						'title'   => 'MOON',
						'percent' => array( 'size' => 45 ),
					),
					array(
						'title'   => 'VENUS',
						'percent' => array( 'size' => 52 ),
					),
					array(
						'title'   => 'JUPITER',
						'percent' => array( 'size' => 94 ),
					),
					array(
						'title'   => 'MARS',
						'percent' => array( 'size' => 85 ),
					),
					array(
						'title'   => 'PLUTO',
						'percent' => array( 'size' => 39 ),
					),
					array(
						'title'   => 'NEPTUNE',
						'percent' => array( 'size' => 95 ),
					),
				),
				'title_field' => '{{{ title }}} - {{{ percent.size }}}%',
			)
		);

		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();
		$this->start_controls_section(
			'style_layout',
			array(
				'label' => 'Layout',
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'columns',
			array(
				'label'     => 'Grid Columns',
				'type'      => Controls_Manager::SELECT,
				'default'   => '7',
				'options'   => array(
					'1'  => '1',
					'2'  => '2',
					'3'  => '3',
					'4'  => '4',
					'5'  => '5',
					'6'  => '6',
					'7'  => '7',
					'8'  => '8',
					'9'  => '9',
					'10' => '10',
				),
				'selectors' => array( '{{WRAPPER}} .sifency-vprog-wrapper' => 'grid-template-columns: repeat({{VALUE}}, 1fr);' ),
			)
		);
		$this->add_responsive_control(
			'grid_gap',
			array(
				'label'     => 'Gap',
				'type'      => Controls_Manager::SLIDER,
				'default'   => array( 'size' => 20 ),
				'selectors' => array( '{{WRAPPER}} .sifency-vprog-wrapper' => 'gap: {{SIZE}}px;' ),
			)
		);

		$this->add_responsive_control(
			'chart_height',
			array(
				'label'      => 'Chart Height',
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vh' ),
				'range'      => array(
					'px' => array(
						'min' => 100,
						'max' => 600,
					),
				),
				'default'    => array(
					'size' => 250,
					'unit' => 'px',
				),
				'selectors'  => array( '{{WRAPPER}} .sifency-vprog-track' => 'height: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_sifency_addons_flex_alignment_controls(
			array(
				'prefix'   => 'flex_wrapper',
				'label'    => 'Allignment',
				'selector' => '.sifency-vprog-item',
			)
		);
		$this->end_controls_section();

		$this->add_sifency_addons_item_style_controls(
			array(
				'prefix'   => 'track_style',
				'label'    => 'Track',
				'selector' => '.sifency-vprog-track',
			)
		);
		$this->add_sifency_addons_item_style_controls(
			array(
				'prefix'   => 'fill_style',
				'label'    => 'Fill',
				'selector' => '.sifency-vprog-fill',
				'exclude'  => array( 'dimensions' ),
			)
		);
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'   => 'heading_style',
				'label'    => 'Title',
				'selector' => '.sifency-heading-style',
				'exclude'  => array( 'tabs', 'transition', 'bg', 'radius', 'border', 'stroke' ),
			)
		);
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'     => 'number_style',
				'label'      => 'Number',
				'selector'   => '.sifency-number-style',
				'color_only' => true,
				'exclude'    => array( 'tabs', 'transition', 'stroke' ),
			)
		);
		$this->add_Sifency_Addons_Animation_Controls();
	}

	protected function render_dom( array $context ) {
		$wrapper_id = esc_attr( $context['dom_id'] );
		$settings   = $this->get_settings_for_display();
		$widget_id  = $this->get_id();

		$animation_manager       = new Sifency_Addons_Animation_Manager( $settings );
		$animation_wrapper_attrs = $animation_manager->get_wrapper_attributes();
		?>
		<div id="<?php echo esc_attr( $wrapper_id ); ?>" class="sifency-vprog-wrapper"
			id="sifency-vprog-<?php echo esc_attr( $widget_id ); ?>"
			<?php echo wp_kses_post( $animation_wrapper_attrs ); ?>>

			<?php
			foreach ( $settings['items'] as $index => $item ) :

				$percent = $item['percent']['size'];
				$delay   = $index * 0.1;

				$animation_item_attrs = $animation_manager->get_item_attributes(
					array(
						'delay' => $delay,
					)
				);
				?>
				<?php $this->render_sifency_section_header_elements( $settings ); ?>
				<div class="sifency-vprog-item elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>"
					<?php echo wp_kses_post( $animation_item_attrs ); ?>>

					<div class="sifency-vprog-track">
						<div class="sifency-vprog-fill"
							style="height:0%; transition-delay: <?php echo esc_attr( $delay ); ?>s;"
							data-height="<?php echo esc_attr( $percent ); ?>">

							<?php if ( $settings['skin'] === 'tooltip' ) : ?>
								<span class="sifency-vprog-tooltip"><?php echo esc_html( $percent ); ?>%</span>
							<?php endif; ?>

							<?php if ( $settings['skin'] === 'internal' ) : ?>
								<div class="sifency-vprog-internal-content">
									<span class="sifency-vprog-title sifency-heading-style">
										<?php echo esc_html( $item['title'] ); ?>
									</span>
									<span class="sifency-vprog-percent sifency-number-style">
										<?php echo esc_html( $percent ); ?>%
									</span>
								</div>
							<?php endif; ?>

						</div>
					</div>

					<?php if ( $settings['skin'] === 'chart' ) : ?>
						<div class="sifency-vprog-meta">
							<span class="sifency-vprog-title sifency-heading-style"><?php echo esc_html( $item['title'] ); ?></span>
							<span class="sifency-vprog-percent sifency-number-style"><?php echo esc_html( $percent ); ?>%</span>
						</div>

					<?php elseif ( $settings['skin'] === 'tooltip' ) : ?>
						<div class="sifency-vprog-meta">
							<span class="sifency-vprog-title sifency-heading-style"><?php echo esc_html( $item['title'] ); ?></span>
						</div>
					<?php endif; ?>

				</div>
			<?php endforeach; ?>
		</div>
		<?php
	}

}
