<?php

class PZY_Top_Menu extends \Elementor\Widget_Base
{
    public function get_name()
    {
        return 'pzy_top_menu';
    }

    public function get_title()
    {
        return esc_html__('Top Menu ', 'pezeshkyar');
    }

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

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

    public function get_keywords()
    {
        return ['pzy', 'top', 'menu'];
    }


    public function get_style_depends()
    {
        return ['iconsax'];
    }

    public function get_script_depends()
    {
        return ['init-feather'];
    }

    protected function register_controls()
    {

        $this->start_controls_section(
            'content',
            [
                'label' => esc_html__('Content', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'width',
            [
                'label' => esc_html__('Size', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 30,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 18,
                ],
                'selectors' => [
                    '{{WRAPPER}} .main-desktop-menu > ul > li a .toggle-menu-item' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}}',
                ],
            ]
        );

        $this->add_control(
            'main_logo',
            [
                'label' => esc_html__('Logo', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::MEDIA,
            ]
        );

        $this->add_responsive_control(
            'main_logo_width',
            [
                'label' => esc_html__('Width', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'default' => [
                    'unit' => 'px',
                    'size' => 80,
                ],
                'selectors' => [
                    '{{WRAPPER}} .logo' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'main_logo_space',
            [
                'label' => esc_html__('Space', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'default' => [
                    'unit' => 'px',
                    'size' => 49,
                ],
                'selectors' => [
                    '{{WRAPPER}} .pzy-top-menu-widget' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section('style', [
            'label' => esc_html__('Style', 'pezeshkyar'),
            'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        ]);

        $this->add_control(
            'text_color',
            [
                'label' => esc_html__('Text Color', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .main-desktop-menu > ul > li a .pzy-link-text' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .main-desktop-menu > ul > li a .toggle-menu-item' => 'fill: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'text_hover_color',
            [
                'label' => esc_html__('Text Hover Color', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .main-desktop-menu > ul > li a:hover .pzy-link-text' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .main-desktop-menu > ul > li a:hover .toggle-menu-item' => 'fill: {{VALUE}}',
                ],
            ]
        );
        $this->add_control(
            'text_hover_active',
            [
                'label' => esc_html__('Current Page Link Color', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .main-desktop-menu > ul > li a.pzy-active .pzy-link-text' => 'color: {{VALUE}}',
                    '{{WRAPPER}} .main-desktop-menu > ul > li a.pzy-active .toggle-menu-item' => 'fill: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'first_items_padding',
            [
                'label' => esc_html__('First Items Padding', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'default' => [
                    'top' => 8,
                    'right' => 8,
                    'bottom' => 8,
                    'left' => 8,
                    'unit' => 'px',
                    'isLinked' => false,
                ],
                'selectors' => [
                    '{{WRAPPER}} .main-desktop-menu > ul > li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'items_gap',
            [
                'label' => esc_html__('Items Spacing', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 10,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 2,
                ],
                'selectors' => [
                    '{{WRAPPER}} .main-desktop-menu > ul > li a .pzy-link-text' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

    }


    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $id = $this->get_id();
        $menu_location = 'desktop-main-menu';
        $exist_menu = false;
        $menu_items = [];

        echo "<div class='pzy-d-flex pzy-flex-row-nowrap pzy-top-menu-widget'>";

        if (($menu_location) && ($locations = get_nav_menu_locations()) && isset($locations[$menu_location]) && $locations[$menu_location]) {
            $menu = get_term($locations[$menu_location], 'nav_menu');
            if ($menu && !is_wp_error($menu)) {
                $all_menu_items = wp_get_nav_menu_items($menu->term_id);
                $exist_menu = true;
                $menu_items = PZY_Menu::getTreeModeMenuItems($all_menu_items);
            }
        }
//        .mobile-menu-wrapper .mobile-menu .mobile-menu-box .mobile-categories-list > ul > li > ul
        echo '<div class="toggle-menu" data-target="#mobile-menu-wrapper-'.$id.'">';
        echo '<i class="toggle-menu-icon" data-feather="menu"></i>';
        echo '</div>';

        if ($settings['main_logo']['url'] ?? ''):
            ?>
            <div class="logo pzy-d-flex pzy-align-items-center">
                <a class="pzy-d-block" href="<?php echo esc_url(home_url('/')) ?>">
                    <img src="<?php echo $settings['main_logo']['url'] ?>"
                         alt="<?php echo get_bloginfo('name'); ?>"/>
                </a>
            </div>
        <?php
        endif;

        echo '<div class="mobile-menu-wrapper pzy-hide" id="mobile-menu-wrapper-'.$id.'">';
        echo '<div class="mobile-menu">';

        if ($settings['main_logo']['url'] ?? ''):
            echo '<div class="menu-header">';
            ?>
            <a class="pzy-d-block" href="<?php echo esc_url(home_url('/')) ?>">
                <img src="<?php echo $settings['main_logo']['url'] ?>"
                     alt="<?php echo get_bloginfo('name'); ?>"/>
            </a>
            <?php
            echo '</div>';
        endif;

        echo '<div class="mobile-menu-box">';

        if ($exist_menu) {
            PZY_Menu::create_pzy_mobile_menu($menu_items);
        } else {
            echo '<!-- no menu defined in location "' . $menu_location . '" -->';
        }

        echo '</div>';

        echo '</div>';
        echo '</div>';

        if ($exist_menu) {
            PZY_Menu::create_pzy_menu($menu_items);
        } else {
            echo '<!-- no menu defined in location "' . $menu_location . '" -->';
        }

        echo "</div>";

        echo <<<EOL
<script>
feather.replace();
</script>
EOL;

    }

}
