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

namespace MadeByAura\Prime\Plugins\Elementor\Widgets;

use Elementor\Controls_Manager;
use Elementor\Widget_Base;
use MadeByAura\Prime\Base;

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

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

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

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

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

	/**
	 * 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() {
		// Style section.
		$this->start_controls_section(
			'section_style',
			[
				'label' => __( 'Hamburger', 'aura-prime' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			],
		);

		// 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',
					],
				],
				'selectors_dictionary' => [
					'left'   => 'margin-left: unset; margin-right: auto;',
					'center' => 'margin-left: auto; margin-right: auto;',
					'right'  => 'margin-left: auto; margin-right: unset;',
				],
				'selectors'            => [
					'{{WRAPPER}} .aura-hamburger' => '{{VALUE}}',
				],
			],
		);

		// Style section > Width.
		$this->add_responsive_control(
			'width',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Width', 'aura-prime' ),
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger' => 'width: {{SIZE}}{{UNIT}};',
				],
			],
		);

		// Style section > Height.
		$this->add_responsive_control(
			'height',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Height', 'aura-prime' ),
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger' => 'height: {{SIZE}}{{UNIT}};',
				],
			],
		);

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

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

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

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

		// Colors section.
		$this->start_controls_section(
			'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 tab > Bar color.
		$this->add_control(
			'color',
			[
				'label'     => __( 'Bar color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger' => '--aura-bar-color: {{VALUE}}',
				],
			],
		);

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

		// Colors section > Colors tabs > Normal tab > Border color.
		$this->add_control(
			'border_color',
			[
				'label'     => __( 'Border color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger' => '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 tab > Bar color.
		$this->add_control(
			'hover_color',
			[
				'label'     => __( 'Bar color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger:hover' => '--aura-bar-color: {{VALUE}}',
				],
			],
		);

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

		// Colors section > Colors tabs > Hover tab > Border color.
		$this->add_control(
			'hover_border_color',
			[
				'label'     => __( 'Border Color', 'aura-prime' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger: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();

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

		// Bars section > Bar width.
		$this->add_responsive_control(
			'bar_width',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Bar width', 'aura-prime' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger' => '--aura-bar-width: {{SIZE}}{{UNIT}};',
				],
			],
		);

		// Bars section > Bar height.
		$this->add_responsive_control(
			'bar_height',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Bar height', 'aura-prime' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger' => '--aura-bar-height: {{SIZE}}{{UNIT}};',
				],
			],
		);

		// Bars section > Bar gap.
		$this->add_responsive_control(
			'bar_gap',
			[
				'type'      => Controls_Manager::SLIDER,
				'label'     => __( 'Bar gap', 'aura-prime' ),
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .aura-hamburger' => '--aura-bar-gap: {{SIZE}}{{UNIT}};',
				],
			],
		);

		// END Bars 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() {
		Base::view(
			'views/hamburger',
			[
				'attrs' => [
					'data-open-modal' => 'menu',
				],
			],
		);
	}

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