<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_Toc extends Widget_Base {

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

	public function get_title() {
		return esc_html__( 'Table of Contents', 'essential-classy-addons-for-elementor' );
	}

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

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

	public function get_keywords() {
		return array( 'table of contents', 'toc' );
	}

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

	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__( 'Table of Contents', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'contentSelector',
			array(
				'label'       => esc_html__( 'Content Selector', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => '',
				'dynamic'     => array(
					'active' => true,
				),
				'label_block' => true,
			)
		);
		$this->add_control(
			'headingSelector',
			array(
				'label'       => __( 'Select Tags', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SELECT2,
				'multiple'    => true,
				'options'     => array(
					'h1' => __( 'H1', 'essential-classy-addons-for-elementor' ),
					'h2' => __( 'H2', 'essential-classy-addons-for-elementor' ),
					'h3' => __( 'H3', 'essential-classy-addons-for-elementor' ),
					'h4' => __( 'H4', 'essential-classy-addons-for-elementor' ),
					'h5' => __( 'H5', 'essential-classy-addons-for-elementor' ),
					'h6' => __( 'H6', 'essential-classy-addons-for-elementor' ),
				),
				'default'     => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
				'label_block' => true,
			)
		);
		$this->add_responsive_control(
			'headingsOffset',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Heading Active Offset ', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default'     => array(
					'unit' => 'px',
					'size' => 1,
				),
				'separator'   => 'before',
				'render_type' => 'ui',
			)
		);
		$this->add_control(
			'isCollapsedClass',
			array(
				'label'     => esc_html__( 'Collapsed Sub', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'scrollSmoothDuration',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Smooth Scroll Duration', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 1,
						'max'  => 1000,
						'step' => 1,
					),
				),
				'default'     => array(
					'unit' => 'px',
					'size' => 420,
				),
				'render_type' => 'ui',
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'fixedPosition',
			array(
				'label'     => esc_html__( 'Fixed', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'fixedOffsetTop',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Top Offset', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 1,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default'     => array(
					'unit' => 'px',
					'size' => 100,
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .is-position-fixed' => 'top: {{SIZE}}{{UNIT}}',
				),
				'condition'   => array(
					'fixedPosition' => 'yes',
				),
			)
		);
		$this->add_control(
			'fixedScrollBased',
			array(
				'label'       => __( 'Type', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SELECT,
				'multiple'    => true,
				'options'     => array(
					'active'    => __( 'Scroll Based', 'essential-classy-addons-for-elementor' ),
					'container' => __( 'Parent Container Based', 'essential-classy-addons-for-elementor' ),
				),
				'default'     => 'active',
				'label_block' => true,
				'condition'   => array(
					'fixedPosition' => 'yes',
				),
			)
		);
		$this->add_control(
			'afterScrollOffset',
			array(
				'label'     => __( 'After Scroll', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 10000,
				'step'      => 100,
				'default'   => 1000,
				'condition' => array(
					'fixedPosition'    => 'yes',
					'fixedScrollBased' => 'active',
				),
			)
		);
		$this->add_control(
			'ignoreSelector',
			array(
				'label'       => esc_html__( 'Ignore Selector', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'label_block' => true,
				'description' => __( 'i.e. .class h1,.class h3', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'layout',
			array(
				'label'       => __( 'Layout', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SELECT,
				'multiple'    => true,
				'options'     => array(
					''         => __( 'Layout 1', 'essential-classy-addons-for-elementor' ),
					'layout-2' => __( 'Layout 2', 'essential-classy-addons-for-elementor' ),
					'layout-3' => __( 'Layout 3', 'essential-classy-addons-for-elementor' ),
				),
				'default'     => '',
				'label_block' => true,
			)
		);
		$this->add_control(
			'layout3ListType',
			array(
				'label'       => __( 'List Style Type', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SELECT,
				'multiple'    => true,
				'options'     => array(
					'disc'   => __( 'Disc', 'essential-classy-addons-for-elementor' ),
					'circle' => __( 'Circle', 'essential-classy-addons-for-elementor' ),
					'square' => __( 'Square', 'essential-classy-addons-for-elementor' ),
					'none'   => __( 'None', 'essential-classy-addons-for-elementor' ),
				),
				'default'     => 'disc',
				'label_block' => true,
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-table-of-content.layout-3 ol' => 'list-style: {{VALUE}};',
				),
				'condition'   => array(
					'layout' => 'layout-3',
				),
			)
		);
		$this->add_responsive_control(
			'itemMargin',
			array(
				'label'      => esc_html__( 'Item Gap', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} li.toc-list-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'separator'  => 'before',
			)
		);
		$this->add_responsive_control(
			'mainWidth',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'TOC Width', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 1,
						'max'  => 700,
						'step' => 10,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-table-of-content' => 'width: {{SIZE}}{{UNIT}}',
				),
				'separator'   => 'before',
			)
		);
		$this->end_controls_section();

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

		$this->start_controls_section(
			'itemStyling',
			array(
				'label' => esc_html__( 'Item', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'itemTypography',
				'selector' => '{{WRAPPER}} a.toc-link',
			)
		);
		$this->start_controls_tabs( 'tabsItemStyle' );
		$this->start_controls_tab(
			'tabItemN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'itemColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} a.toc-link' => 'color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabItemHA',
			array(
				'label' => esc_html__( 'Hover / Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'itemColorA',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} a.toc-link.is-active-link,
					{{WRAPPER}} a.toc-link:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'itemBeforeLineStyling',
			array(
				'label'     => esc_html__( 'Before Line', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'layout' => '',
				),
			)
		);
		$this->add_responsive_control(
			'lineWidth',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Line Width', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 1,
						'max'  => 10,
						'step' => 1,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} a.toc-link::before' => 'width: {{SIZE}}{{UNIT}}',
				),
			)
		);
		$this->add_responsive_control(
			'lineOffset',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Line Offset', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 1,
						'max'  => 50,
						'step' => 1,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .toc-list' => 'padding-left: {{SIZE}}{{UNIT}}',
				),
			)
		);
		$this->start_controls_tabs( 'tabsLineStyle' );
		$this->start_controls_tab(
			'tabLineN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'lineColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} a.toc-link::before' => 'background-color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabLineA',
			array(
				'label' => esc_html__( 'Hover / Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'itemLineA',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} a.toc-link.is-active-link::before,
					{{WRAPPER}} a.toc-link:hover:before' => 'background-color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'itemNumberStyling',
			array(
				'label'     => esc_html__( 'Number', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'layout' => 'layout-2',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'itemNumberTypography',
				'selector' => '{{WRAPPER}} .toc-list-item:before',
			)
		);
		$this->start_controls_tabs( 'tabsItemNumberStyle' );
		$this->start_controls_tab(
			'tabItemNumberN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'itemNumberColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .toc-list-item:before' => 'color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabitemNumberAH',
			array(
				'label' => esc_html__( 'Hover / Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'itemNumberAH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .toc-list-item.is-active-li:before,
					{{WRAPPER}} .toc-list-item:hover:before' => 'color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'itemDotsStyling',
			array(
				'label'     => esc_html__( 'Dots', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'layout' => 'layout-3',
				),
			)
		);
		$this->add_control(
			'dotsColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ecafe-table-of-content ::marker' => 'color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();
	}

	protected function render() {

		$settings                        = $this->get_settings_for_display();
		$datacollect                     = array();
		$datacollect['tocSelector']      = '.ecafe-table-of-content';
		$datacollect['contentSelector']  = ( ! empty( $settings['contentSelector'] ) ) ? esc_attr( $settings['contentSelector'] ) : '.elementor-page';
		$datacollect['headingSelector']  = ( is_array( $settings['headingSelector'] ) ) ? implode( ',', $settings['headingSelector'] ) : $settings['headingSelector'];
		$datacollect['isCollapsedClass'] = '';
		if ( ! empty( $settings['isCollapsedClass'] ) && $settings['isCollapsedClass'] == 'yes' ) {
			$datacollect['isCollapsedClass'] = 'is-collapsed';
		}
		$datacollect['headingsOffset'] = ( ! empty( $settings['headingsOffset']['size'] ) ) ? $settings['headingsOffset']['size'] : 1;

		$datacollect['scrollSmooth']          = true;
		$datacollect['scrollSmoothDuration']  = ( ! empty( $settings['scrollSmoothDuration']['size'] ) ) ? (int) $settings['scrollSmoothDuration']['size'] : 420;
		$datacollect['positionFixedSelector'] = null;
		if ( ! empty( $settings['fixedPosition'] ) && $settings['fixedPosition'] == 'yes' ) {
			$fixedScrollBased                           = ! empty( $settings['fixedScrollBased'] ) ? $settings['fixedScrollBased'] : 'active';
			$datacollect['positionFixedSelectorCustom'] = esc_attr( $fixedScrollBased );
			if ( $fixedScrollBased === 'active' ) {
				$afterScrollOffset                = ! empty( $settings['afterScrollOffset'] ) ? $settings['afterScrollOffset'] : '';
				$datacollect['afterScrollOffset'] = $afterScrollOffset;
			}
		}

		$datacollect['hasInnerContainers'] = true;
		if ( ! empty( $settings['ignoreSelector'] ) ) {
			$datacollect['ignoreSelector'] = esc_attr( $settings['ignoreSelector'] );
		}

		$layout = ! empty( $settings['layout'] ) ? $settings['layout'] : '';

		$output = '<div class="ecafe-table-of-content ' . esc_attr( $layout ) . '" data-datacollects="' . htmlspecialchars( json_encode( $datacollect ), ENT_QUOTES, 'UTF-8' ) . '" ></div>';
		echo $output;
	}
}
