<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography;
use Elementor\Scheme_Color;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

use EcafeAddons\EcafeElementLoad;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

class Ecafe_Scroll_Progress extends Widget_Base {

	public function get_name() {
		return 'ecafe-scroll-progress';
	}

	public function get_title() {
		return esc_html__( 'Scroll Progress', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-scroll-progress-icon';
	}

	public function get_categories() {
		return array( 'essential' );
	}

	public function get_keywords() {
		return array( 'scroll progress', 'progress', 'line scroll', 'scroll indicator', 'page scroll tracker', 'scroll bar progress', 'progress bar tracker', 'scroll progression' );
	}

	public function get_script_depends() {
		return array( 'ecafe-scroll-progress' );
	}

	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}

	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	protected function register_controls() {

		$this->start_controls_section(
			'contentSection',
			array(
				'label' => esc_html__( 'Scroll Progress', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'layout',
			array(
				'label'   => esc_html__( 'Layout', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'layout_1',
				'options' => array(
					'layout_1' => esc_html__( 'Layout 1', 'essential-classy-addons-for-elementor' ),
					'layout_2' => esc_html__( 'Layout 2', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'layout_1_position',
			array(
				'label'     => esc_html__( 'Position', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'l1_pos_top',
				'options'   => array(
					'l1_pos_top'    => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
					'l1_pos_bottom' => esc_html__( 'Bottom', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'layout' => 'layout_1',
				),
			)
		);
		$this->add_control(
			'layout_2_position',
			array(
				'label'     => esc_html__( 'Position', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'l2_pos_right',
				'options'   => array(
					'l2_pos_left'  => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
					'l2_pos_right' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'layout' => 'layout_2',
				),
			)
		);
		$this->add_responsive_control(
			'layout2offset',
			array(
				'label'      => esc_html__( 'Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 2000,
						'step' => 10,
					),
				),
				'condition'  => array(
					'layout' => 'layout_2',
				),
			)
		);
		$this->add_responsive_control(
			'layout2Duration',
			array(
				'label'      => esc_html__( 'Duration', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 100,
						'max'  => 10000,
						'step' => 100,
					),
				),
				'condition'  => array(
					'layout' => 'layout_2',
				),
			)
		);
		$this->end_controls_section();

		/*Notice panel*/
		$ecwidgetdemolink = esc_url( 'https://ecaddons.com/elements/scroll-progress/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/scroll-progress-widget-tutorial/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		/*layout1*/
		$this->start_controls_section(
			'layout1Styling',
			array(
				'label'     => esc_html__( 'Layout 1', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'layout' => 'layout_1',
				),
			)
		);
		$this->add_control(
			'layout1fill',
			array(
				'label'     => esc_html__( 'Fill Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_1 .ec-scroll-progressbar' => 'background-color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'layout1emptyl',
			array(
				'label'     => esc_html__( 'Empty Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_1 .ec-scroll-progress-inner' => 'background-color: {{VALUE}};',
				),
			)
		);
		$this->add_responsive_control(
			'layout1Size',
			array(
				'label'      => esc_html__( 'Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_1 .ec-scroll-progress-inner,
					{{WRAPPER}} .ec-scroll-progress.layout_1 .ec-scroll-progressbar' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();
		/*layout1*/

		/*layout2*/
		$this->start_controls_section(
			'layout2Styling',
			array(
				'label'     => esc_html__( 'Layout 2', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'layout' => 'layout_2',
				),
			)
		);
		$this->add_responsive_control(
			'layout2wh',
			array(
				'label'      => esc_html__( 'Width and Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 250,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'layout2font',
			array(
				'label'      => esc_html__( 'Icon Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 200,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2::after' => 'font-size:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'layout2fontoffset',
			array(
				'label'      => esc_html__( 'Icon Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => -50,
						'max'  => 50,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2::after' => 'margin-top:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'layout2StrokeWidth',
			array(
				'label'      => esc_html__( 'Stroke Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 5,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2 svg.ec-scroll-progress-wrap path' => 'stroke-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsly2tyle' );
		$this->start_controls_tab(
			'tably2N',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'ly2iconColorN',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2::after' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ly2strokeColorN',
			array(
				'label'     => esc_html__( 'Stroke', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2 svg.ec-scroll-progress-wrap path' => 'stroke: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ly2fillColorN',
			array(
				'label'     => esc_html__( 'Fill', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2 svg.ec-scroll-progress-wrap path' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tably2H',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'ly2iconColorH',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2:hover::after' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ly2strokeColorH',
			array(
				'label'     => esc_html__( 'Stroke', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2:hover svg.ec-scroll-progress-wrap path' => 'stroke: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ly2fillColorH',
			array(
				'label'     => esc_html__( 'Fill', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-scroll-progress.layout_2:hover svg.ec-scroll-progress-wrap path' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*layout2*/
	}

	protected function render() {

		$settings          = $this->get_settings_for_display();
		$uid               = uniqid( 'ecscrollpro' );
		$layout            = ! empty( $settings['layout'] ) ? $settings['layout'] : 'layout_1';
		$layout_1_position = ! empty( $settings['layout_1_position'] ) ? $settings['layout_1_position'] : 'l1_pos_top';
		$layout_2_position = ! empty( $settings['layout_2_position'] ) ? $settings['layout_2_position'] : 'l2_pos_right';
		$layout2offset     = ! empty( $settings['layout2offset']['size'] ) ? $settings['layout2offset']['size'] : '50';
		$layout2Duration   = ! empty( $settings['layout2Duration']['size'] ) ? $settings['layout2Duration']['size'] : '500';

		$Output = '';
		if ( ! empty( $layout ) && $layout == 'layout_1' ) {
			$Output         .= '<div class="ec-scroll-progress ' . esc_attr( $layout ) . ' ' . esc_attr( $layout_1_position ) . '">';
				$Output     .= '<div class="ec-scroll-progress-inner">';
					$Output .= '<div class="ec-scroll-progressbar" id="ecscrollprogressbar"></div>';
				$Output     .= '</div>';
			$Output         .= '</div>';
		} elseif ( ! empty( $layout ) && $layout == 'layout_2' ) {
			$Output     .= '<div class="ec-scroll-progress ' . esc_attr( $layout ) . ' ' . esc_attr( $layout_2_position ) . '" data-offset="' . esc_attr( $layout2offset ) . '" data-duration="' . esc_attr( $layout2Duration ) . '">';
				$Output .= '<svg class="ec-scroll-progress-wrap" width="100%" height="100%" viewBox="-1 -1 102 102"><path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/></svg>';
			$Output     .= '</div>';
		}

		echo wp_kses_normalize_entities( $Output );
	}
}
