<?php
/**
 * Elementor widget Button.
 *
 * @package MadeByAura\Prime\Plugins\Elementor\Widgets
 * @author  MadeByAura.com
 */

namespace MadeByAura\Prime\Plugins\Elementor\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Widget_Base;
use MadeByAura\Prime\Base;
use MadeByAura\Prime\Modules\Button as ModulesButton;

defined( 'ABSPATH' ) || die();

/**
 * Elementor widget Button.
 */
class Button extends Widget_Base {
	/**
	 * Get the widget name.
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'aura-theme-button';
	}

	/**
	 * Get the widget title.
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'Button', 'aura-prime' );
	}

	/**
	 * Get the list of keywords the widget belongs to.
	 *
	 * @return array Widget keywords.
	 */
	public function get_keywords() {
		return [ 'aura', 'theme', 'button' ];
	}

	/**
	 * Get the widget icon.
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'eicon-dual-button';
	}

	/**
	 * Get the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'aura-theme' ];
	}

	/**
	 * Get the list of scripts the widget depended on.
	 *
	 * Used to set scripts dependencies required to run the widget.
	 *
	 * @return array Widget scripts dependencies.
	 */
	public function get_script_depends() {
		return [];
	}

	/**
	 * Register the widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 */
	protected function register_controls() {
		// Content section.
		$this->start_controls_section(
			'section_content',
			[
				'label' => __( 'Content', 'aura-prime' ),
			],
		);

		// Content > Type.
		$this->add_control(
			'type',
			[
				'label'   => __( 'Type', 'aura-prime' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '1',
				'options' => ModulesButton::get_types(),
			],
		);

		// Content > Text.
		$this->add_control(
			'text',
			[
				'type'    => Controls_Manager::TEXT,
				'label'   => __( 'Text', 'aura-prime' ),
				'dynamic' => [ 'active' => true ],
				'default' => __( 'Button', 'aura-prime' ),
			],
		);

		// Content > URL.
		$this->add_control(
			'url',
			[
				'type'        => Controls_Manager::URL,
				'label'       => __( 'URL', 'aura-prime' ),
				'placeholder' => __( 'https://your-link.com', 'aura-prime' ),
				'dynamic'     => [ 'active' => true ],
				'default'     => [ 'url' => '#' ],
			],
		);

		// Content > Icon location.
		$this->add_control(
			'icon_location',
			[
				'type'    => Controls_Manager::SELECT,
				'label'   => __( 'Icon location', 'aura-prime' ),
				'default' => 'default',
				'options' => [
					'default'     => esc_html__( 'Default', 'aura-prime' ),
					'none'        => esc_html__( 'None', 'aura-prime' ),
					'before_text' => esc_html__( 'Before text', 'aura-prime' ),
					'after_text'  => esc_html__( 'After text', 'aura-prime' ),
				],
			],
		);

		// Content > Icon image.
		$this->add_control(
			'icon_image',
			[
				'type'        => Controls_Manager::MEDIA,
				'label'       => __( 'Icon image', 'aura-prime' ),
				'media_types' => [ 'svg' ],
				'condition'   => [
					'icon_location!' => [ 'default', 'none' ],
				],
				'selectors'   => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'icon-image' => 'url({{URL}})',
						],
					),
				],
			],
		);

		// Content > Icon method.
		$this->add_control(
			'icon_method',
			[
				'type'      => Controls_Manager::SELECT,
				'label'     => __( 'Icon method', 'aura-prime' ),
				'default'   => 'mask_image',
				'condition' => [
					'icon_location!'   => [ 'default', 'none' ],
					'icon_image[url]!' => '',
				],
				'options'   => [
					'mask_image'       => __( 'Mask image', 'aura-prime' ),
					'background_image' => __( 'Background image', 'aura-prime' ),
				],
			],
		);

		// END Content section.
		$this->end_controls_section();

		// Style section.
		$this->start_controls_section(
			'section_style',
			[
				'label' => __( 'Button', 'aura-prime' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			],
		);

		// Style section > Typography.
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'typography',
				'selector' => '{{WRAPPER}} .aura-button',
			],
		);

		// Style section > Alignment.
		$this->add_responsive_control(
			'align',
			[
				'label'                => esc_html__( 'Alignment', 'aura-prime' ),
				'type'                 => Controls_Manager::CHOOSE,
				'options'              => [
					'left'    => [
						'title' => esc_html__( 'Left', 'aura-prime' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center'  => [
						'title' => esc_html__( 'Center', 'aura-prime' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'   => [
						'title' => esc_html__( 'Right', 'aura-prime' ),
						'icon'  => 'eicon-text-align-right',
					],
					'justify' => [
						'title' => esc_html__( 'Full width', 'aura-prime' ),
						'icon'  => 'eicon-text-align-justify',
					],
				],
				'selectors_dictionary' => [
					'left'    => 'width: unset; margin-left: unset; margin-right: auto;',
					'center'  => 'width: unset; margin-left: auto; margin-right: auto;',
					'right'   => 'width: unset; margin-left: auto; margin-right: unset;',
					'justify' => 'width: 100%; margin-left: unset; margin-right: unset;',
				],
				'selectors'            => [
					'{{WRAPPER}} .aura-button' => '{{VALUE}}',
				],
			],
		);

		// Style section > Padding.
		$this->add_responsive_control(
			'padding',
			[
				'label'     => __( 'Padding', 'aura-prime' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'padding-top'    => '{{TOP}}{{UNIT}}',
							'padding-right'  => '{{RIGHT}}{{UNIT}}',
							'padding-bottom' => '{{BOTTOM}}{{UNIT}}',
							'padding-left'   => '{{LEFT}}{{UNIT}}',
						],
					),
				],
			],
		);

		// Style section > Border width.
		$this->add_responsive_control(
			'border_width',
			[
				'label'     => __( 'Border width', 'aura-prime' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'border-top-width'    => '{{TOP}}{{UNIT}}',
							'border-right-width'  => '{{RIGHT}}{{UNIT}}',
							'border-bottom-width' => '{{BOTTOM}}{{UNIT}}',
							'border-left-width'   => '{{LEFT}}{{UNIT}}',
						],
					),
				],
			],
		);

		// Style section > Border radius.
		$this->add_responsive_control(
			'border_radius',
			[
				'label'     => __( 'Border radius', 'aura-prime' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'border-top-left-radius'     => '{{TOP}}{{UNIT}}',
							'border-top-right-radius'    => '{{RIGHT}}{{UNIT}}',
							'border-bottom-right-radius' => '{{LEFT}}{{UNIT}}',
							'border-bottom-left-radius'  => '{{BOTTOM}}{{UNIT}}',
						],
					),
				],
			],
		);

		// END Style section.
		$this->end_controls_section();

		// Colors section.
		$this->start_controls_section(
			'colors',
			[
				'label' => __( 'Colors', 'aura-prime' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			],
		);

		// Colors section > Colors tabs.
		$this->start_controls_tabs( 'style_colors_tabs' );

		// Colors section > Colors tabs > Normal tab.
		$this->start_controls_tab(
			'style_colors_normal_tab',
			[
				'label' => __( 'Normal', 'aura-prime' ),
			],
		);

		// Colors section > Colors tabs > Normal > Text color.
		$this->add_control(
			'color',
			[
				'label'     => __( 'Text color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// Colors section > Colors tabs > Normal > Icon color.
		$this->add_control(
			'icon_color',
			[
				'label'     => __( 'Icon color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'icon-color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// Colors section > Colors tabs > Normal > Background color.
		$this->add_control(
			'background_color',
			[
				'label'     => __( 'Background color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'background-color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// Colors section > Colors tabs > Normal > Border color.
		$this->add_control(
			'border_color',
			[
				'label'     => __( 'Border color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'border-color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// END Colors section > Colors tabs > Normal tab.
		$this->end_controls_tab();

		// Colors section > Colors tabs > Hover tab.
		$this->start_controls_tab(
			'style_colors_hover_tab',
			[
				'label' => __( 'Hover', 'aura-prime' ),
			],
		);

		// Colors section > Colors tabs > Hover > Text color.
		$this->add_control(
			'hover_color',
			[
				'label'     => __( 'Text color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'hover-color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// Colors section > Colors tabs > Hover > Icon color.
		$this->add_control(
			'hover_icon_color',
			[
				'label'     => __( 'Icon color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'hover-icon-color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// Colors section > Colors tabs > Hover > Background color.
		$this->add_control(
			'hover_background_color',
			[
				'label'     => __( 'Background color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'hover-background-color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// Colors section > Colors tabs > Hover > Border color.
		$this->add_control(
			'hover_border_color',
			[
				'label'     => __( 'Border color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'hover-border-color' => '{{VALUE}}',
						],
					),
				],
			],
		);

		// END Colors section > Colors tabs > Hover tab.
		$this->end_controls_tab();

		// END Colors section > Colors tabs.
		$this->end_controls_tabs();

		// END Colors section.
		$this->end_controls_section();

		// Icon section.
		$this->start_controls_section(
			'section_icon',
			[
				'label'     => __( 'Icon', 'aura-prime' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'icon_location!' => 'none',
				],
			],
		);

		// Icon section > Icon width.
		$this->add_responsive_control(
			'icon_width',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Icon width', 'aura-prime' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'icon-width' => '{{SIZE}}{{UNIT}}',
						],
					),
				],
			],
		);

		// Icon section > Icon height.
		$this->add_responsive_control(
			'icon_height',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Icon height', 'aura-prime' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'icon-height' => '{{SIZE}}{{UNIT}}',
						],
					),
				],
			],
		);

		// Icon section > Icon gap.
		$this->add_responsive_control(
			'icon_gap',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Icon gap', 'aura-prime' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'icon-gap' => '{{SIZE}}{{UNIT}}',
						],
					),
				],
			],
		);

		// Icon section > Icon offset.
		$this->add_responsive_control(
			'icon_offset',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Icon offset', 'aura-prime' ),
				'range'     => [
					'px' => [
						'min'  => -25,
						'max'  => 25,
						'step' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .aura-button' => ModulesButton::get_elementor_selectors(
						[
							'icon-offset' => '{{SIZE}}{{UNIT}}',
						],
					),
				],
			],
		);

		// END Icon section.
		$this->end_controls_section();
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		// TODO: Add support for $settings > url > custom_attributes.

		$args = [
			'type'            => $settings['type'],
			'text'            => $settings['text'],
			'url'             => $settings['url']['url'],
			'target'          => 'on' === $settings['url']['is_external'] ? '_blank' : '',
			'nofollow'        => 'on' === $settings['url']['nofollow'],
			'icon_mask_image' => 'background_image' === $settings['icon_method'] ? false : true,
		];

		$location = $settings['icon_location'];

		switch ( $location ) {
			case 'none':
				$args['icon_enabled'] = false;
				break;
			case 'before_text':
				$args['icon_enabled']     = true;
				$args['icon_before_text'] = true;
				break;
			case 'after_text':
				$args['icon_enabled']     = true;
				$args['icon_before_text'] = false;
				break;
		}

		Base::view( 'views/button', $args );
	}

	/**
	 * Render button widget output in the editor.
	 *
	 * Written as a Backbone JavaScript template and used to generate the live preview.
	 */
	protected function content_template() {}
}
