<?php
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Widget_Base;

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

class CRT_Scroll_Pin_Scale_Circle extends Widget_Base {

	public function get_name() {
		return 'crt-scroll-pin-scale-circle';
	}

	public function get_title() {
		return __( 'Scroll Pin Scale Circle', 'crt-manage' );
	}

	public function get_icon() {
		return 'eicon-circle';
	}

	public function get_categories() {
		return [ 'crt_manage_theme' ];
	}

	public function get_script_depends() {
		return [ 'crt-scroll-pin-scale-circle' ];
	}

	public function get_style_depends() {
		return [ 'crt-scroll-pin-scale-circle' ];
	}

	protected function register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'crt-manage' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'initial_text',
			[
				'label' => __( 'Initial Text', 'crt-manage' ),
				'type' => Controls_Manager::TEXT,
				'default' => __( 'Start', 'crt-manage' ),
				'label_block' => true,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'style_section',
			[
				'label' => __( 'Style', 'crt-manage' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'circle_width',
			[
				'label' => __( 'Circle Size', 'crt-manage' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'vw' ],
				'range' => [
					'px' => [
						'min' => 50,
						'max' => 1000,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 200,
				],
				'selectors' => [
					'{{WRAPPER}} .crt-spsc-circle' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'circle_background',
				'label' => __( 'Circle Background', 'crt-manage' ),
				'types' => [ 'classic', 'gradient', 'video' ],
				'selector' => '{{WRAPPER}} .crt-spsc-inner',
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'circle_expanded_background',
				'label' => __( 'Expanded Circle Background', 'crt-manage' ),
				'types' => [ 'classic', 'gradient', 'video' ],
				'selector' => '{{WRAPPER}} .crt-spsc-inner-expanded',
			]
		);

		$this->add_control(
			'initial_text_color',
			[
				'label' => __( 'Initial Text Color', 'crt-manage' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .crt-spsc-text-small' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'initial_typography',
				'label' => __( 'Initial Typography', 'crt-manage' ),
				'selector' => '{{WRAPPER}} .crt-spsc-text-small',
			]
		);

		$this->add_control(
			'large_text_color',
			[
				'label' => __( 'Expanded Text Color', 'crt-manage' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .crt-spsc-text-large' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'large_typography',
				'label' => __( 'Expanded Typography', 'crt-manage' ),
				'selector' => '{{WRAPPER}} .crt-spsc-text-large',
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		?>
		<div class="crt-spsc-wrapper">
			<div class="crt-spsc-circle">
				<div class="crt-spsc-inner"></div>
				<div class="crt-spsc-inner-expanded"></div>
			</div>
            <div class="crt-spsc-text">
                <span class="crt-spsc-text-inner crt-spsc-text-small"><?php echo esc_html( $settings['initial_text'] ); ?></span>
                <span class="crt-spsc-text-inner crt-spsc-text-large"><?php echo esc_html( $settings['initial_text'] ); ?></span>
            </div>
		</div>
		<?php
	}
}
