<?php

class PZY_Custom_List extends \Elementor\Widget_Base
{
    public function get_name()
    {
        return 'pzy_custom-list';
    }

    public function get_title()
    {
        return esc_html__('لیست سفارشی ', 'pezeshkyar');
    }

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

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

    public function get_keywords()
    {
        return ['pzy', 'unordered', 'list'];
    }

    protected function register_controls()
    {
        $items = new \Elementor\Repeater();
        $items->add_control(
            'item_content',
            [
                'label' => esc_html__('محتوای آیتم', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('محتوای آیتم را وارد کنید', 'pezeshkyar'),
                'label_block' => true,
            ]
        );

        $this->start_controls_section(
            'content_section',
            [
                'label' => esc_html__('محتوا', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'list_type',
            [
                'label' => esc_html__('نحوه نمایش لیست', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'unordered',
                'options' => [
                    'unordered' => esc_html__('لیست نامرتب', 'textdomain'),
                    'ordered' => esc_html__('لیست مرتب', 'textdomain'),
                ],
            ]
        );

        $this->add_control(
            'list_type_icon',
            [
                'label' => esc_html__('آیکون', 'textdomain'),
                'type' => \Elementor\Controls_Manager::ICONS,
                'condition' => [
                    'list_type' => 'unordered',
                ],
            ]
        );

        $this->add_control(
            'list_items',
            [
                'label' => esc_html__('آیتم ها', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $items->get_controls(),
                'default' => [],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'content_style',
            [
                'label' => esc_html__('آیتم ها', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'list_item_text_color',
            [
                'label' => esc_html__('رنگ', 'pezeshkyar-core'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list li' => 'color: {{VALUE}}',
                ],
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'list_item_typography',
                'selector' => '{{WRAPPER}} .pzy-el-custom-list li',
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'list_item_border',
                'selector' => '{{WRAPPER}} .pzy-el-custom-list li .pzy-list-content',
            ]
        );
        $this->add_control(
            'list_item_radius',
            [
                'label' => esc_html__('شعاع', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list li .pzy-list-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name' => 'list_item_background',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pzy-el-custom-list li .pzy-list-content',
            ]
        );

        $this->add_responsive_control(
            'list_item_padding',
            [
                'label' => esc_html__('فاصله داخلی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list li .pzy-list-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'list_items_space',
            [
                'label' => esc_html__('فاصله بین آیتم ها', 'pezeshkyar-core'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'default' => [
                    'unit' => 'px',
                    'size' => 16,
                ],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list li:not(:first-child)' => 'margin-top: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'list_items_icon',
            [
                'label' => esc_html__('آیکون / شماره', 'pezeshkyar'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        /**/
        $this->add_control(
            'list_icon_text_color',
            [
                'label' => esc_html__('رنگ', 'pezeshkyar-core'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'color: {{VALUE}}',
                ],
                'condition' => [
                    'list_type' => 'ordered',
                ],
            ],
        );
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'list_icon_typography',
                'selector' => '{{WRAPPER}} .pzy-el-custom-list-item-icon',
                'condition' => [
                    'list_type' => 'ordered',
                ],
            ]
        );

        $this->add_control(
            'list_icon_color',
            [
                'label' => esc_html__('رنگ', 'pezeshkyar-core'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon svg' => 'fill: {{VALUE}}',
                ],
                'condition' => [
                    'list_type' => 'unordered',
                ],
            ],
        );
        $this->add_control(
            'list_icon_size',
            [
                'label' => __('اندازه آیکون', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'default' => [
                    'unit' => 'px',
                    'size' => 8,
                ],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'list_type' => 'unordered',
                ],
            ]
        );

        $this->add_control(
            'list_icon_number_width',
            [
                'label' => __('عرض باکس شمارنده', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'list_type' => 'ordered',
                ],
            ]
        );
        $this->add_control(
            'list_icon_number_height',
            [
                'label' => __('ارتفاع باکس شمارنده', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'list_type' => 'ordered',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'list_icon_border',
                'selector' => '{{WRAPPER}} .pzy-el-custom-list-item-icon',
            ]
        );
        $this->add_control(
            'list_icon_radius',
            [
                'label' => esc_html__('شعاع', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name' => 'list_icon_background',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .pzy-el-custom-list-item-icon',
            ]
        );
        $this->add_responsive_control(
            'list_icon_padding',
            [
                'label' => esc_html__('فاصله داخلی', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'list_icon_position',
            [
                'label' => __('جایگاه', 'pezeshkyar'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'absolute',
                'options' => [
                    'relative' => __('نسبی', 'pezeshkyar'),
                    'absolute' => __('مطلق', 'pezeshkyar'),
                ],
//                'selectors' => [
//                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'position: {{VALUE}};',
//                ],
            ]
        );
        $this->add_control(
            'list_icon_absolute_horizontal',
            [
                'label' => __('افقی', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'default' => [
                    'unit' => 'px',
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'right: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'list_icon_position' => 'absolute',
                ],
            ]
        );
        $this->add_control(
            'list_icon_absolute_vertical',
            [
                'label' => __('عمودی', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .pzy-el-custom-list-item-icon' => 'top: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'list_icon_position' => 'absolute',
                ],
            ]
        );
        $this->add_control(
            'list_icon_absolute_translate_x',
            [
                'label' => __('جابجایی افقی', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
            ]
        );
        $this->add_control(
            'list_icon_absolute_translate_y',
            [
                'label' => __('جابجایی عمودی', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'default' => [
                    'unit' => '%',
                    'size' => -50,
                ],
            ]
        );
        /**/

        $this->end_controls_section();
    }

    protected function render()
    {
        $list_type = $this->get_settings_for_display('list_type');
        $list_items = $this->get_settings_for_display('list_items');
        $list_type_icon = $this->get_settings_for_display('list_type_icon');

        $icon_style = '';

        $translate_x = $this->get_settings_for_display('list_icon_absolute_translate_x');
        $translate_y = $this->get_settings_for_display('list_icon_absolute_translate_y');


        if ($translate_x && isset($translate_x['unit']) && isset($translate_x['size']) && $translate_y && isset($translate_y['unit']) && isset($translate_y['size'])) {
            $icon_style = "style='position:absolute;transform: translate({$translate_x['size']}{$translate_x['unit']}, {$translate_y['size']}{$translate_y['unit']});'";
        }

        if ($list_items <= 0) {
            return;
        }

        $list_tag = 'ul';
        if ($list_type == 'ordered') {
            $list_tag = 'ol';
        }

        echo "<$list_tag class='pzy-el-custom-list'>";
        foreach ($list_items as $index => $list_item) {
            ?>
            <li class="pzy-d-block">
                <div class="pzy-d-inline-block pzy-position-relative pzy-list-content">
                    <?php if ($list_tag == 'ul' && $list_type_icon && isset($list_type_icon['value'])): ?>
                        <div class="pzy-el-custom-list-item-icon pzy-d-inline-flex pzy-align-items-center pzy-justify-content-center" <?php echo $icon_style ?>>
                            <?php \Elementor\Icons_Manager::render_icon($list_type_icon, ['aria-hidden' => 'true']); ?>
                        </div>
                    <?php else: ?>
                        <div class="pzy-el-custom-list-item-icon pzy-d-inline-flex pzy-align-items-center pzy-justify-content-center" <?php echo $icon_style ?>><?php echo (1+$index) ?></div>
                    <?php endif; ?>
                    <?php echo $list_item['item_content'] ?>
                </div>

            </li>
            <?php
        }
        echo "</$list_tag>";
    }
}