<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\utils;
use Elementor\Scheme_Color;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

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

class SK_App_Slider_Widget extends Widget_Base {

    public function get_name() {
        return 'app-slider';
    }

    public function get_title() {
        return  esc_html__( 'App Slider', 'sliderkits' );
    }

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

    public function get_categories() {
        return array( 'sliderkits' );
    }

    /**
     * Enqueue when widget is on page.
     */
    public function get_style_depends() {
        return array( 'slick', 'slick-theme', 'sliderkits', 'app-slider' );
    }
    /**
     * Enqueue scripts when widget is on page.
     */
    public function get_script_depends() {
        return array();
    }

    protected function register_controls() {

      $this->start_controls_section(
          'section_sk_app_slider_slides',
          [
              'label' => esc_html__( 'Add Slides', 'sliderkits' ),
              'tab'   => Controls_Manager::TAB_CONTENT,
          ]
      );

      $repeater = new \Elementor\Repeater();

      $repeater->add_control(
        'title', [
          'label' => esc_html__( 'Name', 'sliderkits' ),
          'type' => \Elementor\Controls_Manager::TEXT,
          'default' => esc_html__( 'John Doe' , 'sliderkits' ),
          'label_block' => true,
        ]
      );

      $repeater->add_control(
        'picture', [
          'label' => esc_html__( 'Picture', 'sliderkits' ),
          'type' => Controls_Manager::MEDIA,
          'show_label' => false,
          'default' => [
            'url' => \Elementor\Utils::get_placeholder_image_src(),
          ]
        ]
      );

      $this->add_control(
        'slides',
        [
          'label' => esc_html__( 'Add Slides', 'sliderkits' ),
          'type' => \Elementor\Controls_Manager::REPEATER,
          'fields' => $repeater->get_controls(),
          'default' => [
            [
               'title' => 'Hello, SliderKits',
               'picture' => \Elementor\Utils::get_placeholder_image_src()
            ],
            [
               'title' => 'Hello, SliderKits',
               'picture' => \Elementor\Utils::get_placeholder_image_src()
            ],
            [
               'title' => 'Hello, SliderKits',
               'picture' => \Elementor\Utils::get_placeholder_image_src()
            ],
            [
               'title' => 'Hello, SliderKits',
               'picture' => \Elementor\Utils::get_placeholder_image_src()
            ]
          ],
          'title_field' => '{{{ title }}}',
        ]
      );

      $this->end_controls_section();


      $this->start_controls_section(
          'section_sk_app_slider_settings',
          [
              'label' => esc_html__( 'Slider Setting', 'sliderkits' ),
              'tab'   => Controls_Manager::TAB_CONTENT,
          ]
      );

      $this->add_control(
          'slidesToShow',
          [
              'label' => esc_html__( 'Slides To Show', 'sliderkits' ),
              'type' => Controls_Manager::SELECT,
              'default' => 3,
              'options' => [
                '2' => 2,
                '3' => 3
              ]
          ]
      );

      $this->add_control(
          'autoplay',
          [
              'label' => esc_html__( 'Autoplay', 'sliderkits' ),
              'type' => Controls_Manager::SWITCHER,
              'default' => 'false',
              'label_on' => esc_html__( 'Yes', 'sliderkits' ),
              'label_off' => esc_html__( 'No', 'sliderkits' ),
              'return_value' => 'true',
          ]
      );

      $this->add_control(
          'autoplaySpeed',
          [
              'label' => esc_html__( 'Autoplay Speed', 'sliderkits' ),
              'type' => Controls_Manager::NUMBER,
              'default' => '3000',
              'condition' => [
                  'autoplay' => 'true',
              ]
          ]
      );

      $this->add_control(
          'pauseOnHover',
          [
              'label' => esc_html__( 'Pause On Hover', 'sliderkits' ),
              'type' => Controls_Manager::SWITCHER,
              'default' => 'true',
              'label_on' => esc_html__( 'Yes', 'sliderkits' ),
              'label_off' => esc_html__( 'No', 'sliderkits' ),
              'return_value' => 'true',
              'condition' => [
                  'autoplay' => 'true',
              ]
          ]
      );

      $this->add_control(
          'dots',
          [
              'label' => esc_html__( 'Pagination Dots', 'sliderkits' ),
              'type' => Controls_Manager::SWITCHER,
              'default' => 'true',
              'label_on' => esc_html__( 'Yes', 'sliderkits' ),
              'label_off' => esc_html__( 'No', 'sliderkits' ),
              'return_value' => 'true'
          ]
      );

      $this->add_control(
          'infinite',
          [
              'label' => esc_html__( 'Infinite Loop', 'sliderkits' ),
              'type' => Controls_Manager::SWITCHER,
              'default' => 'false',
              'label_on' => esc_html__( 'Yes', 'sliderkits' ),
              'label_off' => esc_html__( 'No', 'sliderkits' ),
              'return_value' => 'true'
          ]
      );

      $this->add_control(
          'swipe',
          [
              'label' => esc_html__( 'Touch Swipe', 'sliderkits' ),
              'type' => Controls_Manager::SWITCHER,
              'default' => 'true',
              'label_on' => esc_html__( 'Yes', 'sliderkits' ),
              'label_off' => esc_html__( 'No', 'sliderkits' ),
              'return_value' => 'true'
          ]
      );

      $this->add_control(
          'touchMove',
          [
              'label' => esc_html__( 'Slide moving with touch', 'sliderkits' ),
              'type' => Controls_Manager::SWITCHER,
              'default' => 'true',
              'label_on' => esc_html__( 'Yes', 'sliderkits' ),
              'label_off' => esc_html__( 'No', 'sliderkits' ),
              'return_value' => 'true'
          ]
      );

      $this->add_control(
          'speed',
          [
              'label' => esc_html__( 'Transition Speed', 'sliderkits' ),
              'type' => Controls_Manager::NUMBER,
              'default' => '300'
          ]
      );

      $this->end_controls_section();

      $this->start_controls_section(
          'section_sk_app_slider_mobile',
          [
              'label' => esc_html__('Mobile', 'sliderkits'),
              'tab'   => Controls_Manager::TAB_STYLE,
          ]
      );

      $this->add_control(
          'mobile_border_color',
          [
              'type' => Controls_Manager::COLOR,
              'label' => esc_html__( 'Border Color', 'sliderkits' ),
              'default' => '',
              'selectors' => [
                  '{{WRAPPER}} .sk-mobile-mockup' => 'border-color: {{VALUE}}',
              ]
          ]
      );

      $this->end_controls_section();

      $this->start_controls_section(
          'section_sk_app_slider_dots',
          [
              'label' => esc_html__('Dots', 'sliderkits'),
              'tab'   => Controls_Manager::TAB_STYLE,
          ]
      );

      $this->add_control(
          'dots_color',
          [
              'type' => Controls_Manager::COLOR,
              'label' => esc_html__( 'Dots Color', 'sliderkits' ),
              'default' => '',
              'selectors' => [
                  '{{WRAPPER}} .slick-dots li button:before' => 'color: {{VALUE}}',
              ],
              'condition' => [
                  'dots' => 'true',
              ]
          ]
      );

      $this->add_control(
          'dots_active_color',
          [
              'type' => Controls_Manager::COLOR,
              'label' => esc_html__( 'Active Color', 'sliderkits' ),
              'default' => '',
              'selectors' => [
                  '{{WRAPPER}} .slick-dots li.slick-active button::before' => 'color: {{VALUE}}',
              ],
              'condition' => [
                  'dots' => 'true',
              ]
          ]
      );

      $this->add_responsive_control(
        'dots_size',
        [
          'label' => esc_html__( 'Dots Size', 'sliderkits' ),
          'type' => Controls_Manager::SLIDER,
          'size_units' => [ 'px' ],
          'range' => [
            'px' => [
              'min' => 5,
              'max' => 20,
              'step' => 1,
            ]
          ],
          'default' => [
            'unit' => 'px',
            'size' => 9,
          ],
          'condition' => [
              'dots' => 'true',
          ],
          'selectors' => [
            '{{WRAPPER}} .slick-dots li button::before' => 'font-size: {{SIZE}}{{UNIT}};',
          ],
        ]
      );

      $this->add_control(
        'dots_disabled',
        [
          'label' => esc_html__( 'Dots Disabled',  ),
          'show_label' => false,
          'type' => \Elementor\Controls_Manager::RAW_HTML,
          'raw' => esc_html__( 'The dots are disabled.', 'sliderkits' ),
          'conditions' => [
              'relation' => 'and',
              'terms' => [
                  [
                      'name' => 'dots',
                      'operator' => '!==',
                      'value' => 'true'
                  ]
              ]
          ]
        ]
      );
      $this->end_controls_section();
    }

    protected function render() {
       SK_Elementor_Widgets::widget_template( self::get_name(),$this->get_settings() );
       if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
           echo '<script>window.SliderKits.init();</script>';
       }
    }


}