<?php
namespace EcafeAddons\Widgets;

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

use EcafeAddons\EcafeElementLoad;

// Prevent direct access to files
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class Ecafe_Motion_Text_Circle extends Widget_Base {

	public function get_name() {
		return 'ecafe-motion-text-circle';
	}

	public function get_title() {
		return esc_html__( 'Motion Text Circle', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-motion-text-circle-icon';
	}
	public function get_categories() {
		return array( 'essential' );
	}
	public function get_keywords() {
		return array( 'motion text circle' );
	}

	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__( 'Motion Text Circle', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'mtctext',
			array(
				'label'       => esc_html__( 'Circular Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => esc_html__( 'Motion Text Circle • Motion Text Circle • Motion Text Circle • ', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'label_block' => true,
			)
		);
		$this->add_control(
			'mtcradius',
			array(
				'label'      => esc_html__( 'Circle Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 50,
						'max' => 500,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 100,
				),
			)
		);
		$this->add_responsive_control(
			'mtcspeed',
			array(
				'label'     => esc_html__( 'Rotation Speed', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 10,
				'selectors' => array(
					'{{WRAPPER}} .ec-motion-text-circle-wrapper' => '--speed:{{SIZE}}s;',
				),
			)
		);
		$this->add_control(
			'mtcdirection',
			array(
				'label'   => esc_html__( 'Direction', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'normal',
				'options' => array(
					'normal'  => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
					'reverse' => esc_html__( 'Reverse', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'mtcstartOffset',
			array(
				'label'   => esc_html__( 'Text Start Offset (%)', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => 0,
			)
		);
		$this->add_control(
			'mtcpauseHover',
			array(
				'label'        => esc_html__( 'Pause On Hover', 'essential-classy-addons-for-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'no',
				'label_on'     => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off'    => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'separator'    => 'before',
				'return_value' => 'yes',
			)
		);
		$this->add_control(
			'mtccenterType',
			array(
				'label'   => esc_html__( 'Center Content', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'image',
				'options' => array(
					'none'  => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
					'image' => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
					'text'  => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'mtccenterImage',
			array(
				'label'     => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => array(
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				),
				'dynamic'    => array(
					'active' => true,
				),
				'condition' => array(
					'mtccenterType' => 'image',
				),
			)
		);
		$this->add_control(
			'mtccenterText',
			array(
				'label'       => esc_html__( 'Center Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Logo', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'label_block' => true,
				'condition'   => array(
					'mtccenterType' => 'text',
				),
			)
		);
		$this->add_responsive_control(
			'mtccenterSize',
			array(
				'label'      => esc_html__( 'Image Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 300,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 125,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-mtc-center-content' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'mtccenterType' => 'image',
				),
			)
		);
		$this->end_controls_section();

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

		$this->start_controls_section(
			'mtcstyle',
			array(
				'label' => esc_html__( 'Text Style', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'mtctextColor',
			array(
				'label'     => esc_html__( 'Text Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-motion-text-circle-wrapper .ec-mtc-text' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'mtctTextTypo',
				'selector' => '{{WRAPPER}} .ec-motion-text-circle-wrapper .ec-mtc-text',
			)
		);
		$this->add_control(
			'mtccenterColor',
			array(
				'label'     => esc_html__( 'Center Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-motion-text-circle-wrapper .ec-mtc-center-content' => 'color: {{VALUE}};',
				),
				'condition' => array(
					'mtccenterType' => 'text',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'      => 'mtccenterTypo',
				'selector'  => '{{WRAPPER}} .ec-motion-text-circle-wrapper .ec-mtc-center-content-text',
				'condition' => array(
					'mtccenterType' => 'text',
				),
			)
		);
		$this->end_controls_section();
	}

	protected function render() {
		$settings = $this->get_settings_for_display();

		$radius   = intval( $settings['mtcradius']['size'] );
		$diameter = $radius * 2;
		$pathID   = 'ec-mtc-path-' . $this->get_id();

		$direction = $settings['mtcdirection'] === 'reverse' ? 'reverse' : 'normal';
		$hover     = $settings['mtcpauseHover'] === 'yes' ? 'ec-mtc-hover' : '';

		$output              = '<div class="ec-motion-text-circle-wrapper ' . esc_attr( $hover ) . '" style="width:' . esc_attr( $diameter ) . 'px;height:' . esc_attr( $diameter ) . 'px;--direction:' . esc_attr( $direction ) . ';">';
			$output         .= '<svg viewBox="0 0 ' . esc_attr( $diameter ) . ' ' . esc_attr( $diameter ) . '">';
				$output     .= '<defs>';
					$output .= '<path id="' . esc_attr( $pathID ) . '" d="M ' . esc_attr( $radius ) . ',' . esc_attr( $radius ) . ' m -' . esc_attr( $radius - 10 ) . ',0 a ' . esc_attr( $radius - 10 ) . ',' . esc_attr( $radius - 10 ) . ' 0 1,1 ' . esc_attr( ( $radius - 10 ) * 2 ) . ',0 a ' . esc_attr( $radius - 10 ) . ',' . esc_attr( $radius - 10 ) . ' 0 1,1 -' . esc_attr( ( $radius - 10 ) * 2 ) . ',0"/>';
				$output     .= '</defs>';

				$output     .= '<text class="ec-mtc-text">';
					$output .= '<textPath href="#' . esc_attr( $pathID ) . '" startOffset="' . intval( $settings['mtcstartOffset'] ) . '%">' . esc_html( $settings['mtctext'] ) . '</textPath>';
				$output     .= '</text>';
			$output         .= '</svg>';

		if ( $settings['mtccenterType'] !== 'none' ) {
			$output .= '<div class="ec-mtc-center-content">';
			if ( $settings['mtccenterType'] === 'image' && ! empty( $settings['mtccenterImage']['url'] ) ) {
				$output .= '<img src="' . esc_url( $settings['mtccenterImage']['url'] ) . '" alt="">';
			}

			if ( $settings['mtccenterType'] === 'text' ) {
				$output .= '<span class="ec-mtc-center-content-text">' . esc_html( $settings['mtccenterText'] ) . '</span>';
			}
				$output .= '</div>';
		}

		$output .= '</div>';
		echo wp_kses_normalize_entities( $output );
	}

	protected function content_template() {
		?>
		<#
		var radius   = settings.mtcradius.size || 100;
		var diameter = radius * 2;
		var pathID   = 'ec-mtc-path-' + view.getID();
		var direction = settings.mtcdirection === 'reverse' ? 'reverse' : 'normal';
		var hover     = settings.mtcpauseHover === 'yes' ? 'ec-mtc-hover' : '';
		#>
		
		<div class="ec-motion-text-circle-wrapper {{ hover }}" 
			style="width:{{ diameter }}px;height:{{ diameter }}px;
					--direction:{{ direction }};">
		
			<svg viewBox="0 0 {{ diameter }} {{ diameter }}">
				<defs>
					<path id="{{ pathID }}"
						d="M {{ radius }},{{ radius }}
							m -{{ radius-10 }},0
							a {{ radius-10 }},{{ radius-10 }} 0 1,1 {{ (radius-10)*2 }},0
							a {{ radius-10 }},{{ radius-10 }} 0 1,1 -{{ (radius-10)*2 }},0"/>
				</defs>
		
				<text class="ec-mtc-text">
					<textPath href="#{{ pathID }}" startOffset="{{ settings.mtcstartOffset }}%">
						{{{ settings.mtctext }}}
					</textPath>
				</text>
			</svg>
		
			<# if(settings.mtccenterType !== 'none'){ #>
				<div class="ec-mtc-center-content">
		
					<# if(settings.mtccenterType === 'image' && settings.mtccenterImage.url){ #>
						<img src="{{ settings.mtccenterImage.url }}">
					<# } #>
		
					<# if(settings.mtccenterType === 'text'){ #>
						<span class="ec-mtc-center-content-text">
							{{{ settings.mtccenterText }}}
						</span>
					<# } #>
		
				</div>
			<# } #>
		</div>
		<?php
	}
}
