<?php

namespace Webien\Elementor\Extensions\ColumnSlider;

use Elementor\Element_Base;

class ColumnSlider
{
    function __construct()
    {
        $this->register_hooks();
    }


    private function register_hooks()
    {
        if (is_admin()) {
            add_action( 'elementor/element/before_section_end', [ $this, 'register_controls' ], 10, 3 );
            add_action( 'elementor/element/after_section_end', [ $this, 'register_more_controls' ], 10, 3 );
        }

        add_action('elementor/frontend/section/before_render', [$this, 'add_column_attributes'], 10, 1);
        add_action('elementor/frontend/section/after_render', [$this, 'after_render'], 10, 1);
    }


    public function register_controls($element, $section_id, $args )
    {

        $sections = [
            'section_layout',
        ];

        if ( ! in_array( $section_id, $sections ) ) {
            return;
        }

        $element->add_control(
            'webien_column_slider',
            [
                'label' => __( 'Kolumner som slider', 'webien' ),
                'type'      => \Elementor\Controls_Manager::SWITCHER,
                'default'   => 'no',
            ]
        );

        $element->add_control(
            'slider_note',
            [
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => esc_html__( 'Sliderfunktionen förhandsvisas inte här i elementor läget. Se mer inställningar nedan.', 'webien' ),
                'content_classes' => 'webien-control-info',
                'condition' => ['webien_column_slider' => 'yes'],
            ]
        );

    }


    public function register_more_controls($element, $section_id, $args )
    {

        $sections = [
            'section_layout',
        ];

        if (!in_array($section_id, $sections)) {
            return;
        }

        $element->start_controls_section(
            'section_slider_settings',
            [
                'label' => 'Section slider',
                'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
                'condition' => ['webien_column_slider' => 'yes'],
            ]
        );
        $element->add_control(
            'settings_slider_note',
            [
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => esc_html__( 'Sliderfunktionen förhandsvisas inte här i elementor läget.', 'webien' ),
                'content_classes' => 'webien-control-info',
            ]
        );

        $element->add_control(
            'section_slider_desktop',
            [
                'label' => __('Aktivera för desktop', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
            ]
        );
        $element->add_control(
            'section_slider_tablet',
            [
                'label' => __('Aktivera för tablet', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
            ]
        );
        $element->add_control(
            'section_slider_mobile',
            [
                'label' => __('Aktivera för mobil', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'separator' => 'after'
            ]
        );


        $element->add_control(
            'show_arrows',
            [
                'label' => __('Visa pilar', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Ja', 'webien'),
                'label_off' => __('Nej', 'webien'),
            ]
        );
        $element->add_control(
            'show_dots',
            [
                'label' => __('Visa prickar för navigation', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Ja', 'webien'),
                'label_off' => __('Nej', 'webien'),
            ]
        );
        $element->add_control(
            'adaptive_height',
            [
                'label' => __('Adaptiv höjd', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Ja', 'webien'),
                'label_off' => __('Nej', 'webien'),
            ]
        );
        $element->add_control(
            'autoplay',
            [
                'label' => __('Autoplay', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Ja', 'webien'),
                'label_off' => __('Nej', 'webien'),
            ]
        );
        $element->add_control(
            'fade',
            [
                'label' => __('Fade / Slide', 'webien'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Fade', 'webien'),
                'label_off' => __('Slide', 'webien'),
            ]
        );
        $element->add_control(
            'speed',
            [
                'label' => __('Tid för animation (sec)', 'webien'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['sec'],
                'range' => [
                    'sec' => [
                        'min' => 0,
                        'max' => 2,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'sec',
                    'size' => 0.4,
                ],
            ]
        );

        $element->add_control(
            'autoplay_time',
            [
                'label' => __('Tid att stanna på varje slide', 'webien'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['sec'],
                'range' => [
                    'sec' => [
                        'min' => 1,
                        'max' => 20,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'sec',
                    'size' => 5,
                ],
                'condition' => ['autoplay' => 'yes'],
            ]
        );
        $element->end_controls_section();

        $element->start_controls_section(
            'style_section',
            [
                'label' => __('Section slider', 'webien'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => ['webien_column_slider' => 'yes'],
            ]
        );

        $element->add_control(
            'icon_color',
            [
                'label' => __('Färg på pilar', 'webien'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#ffffff',
            ]
        );
        $element->add_control(
            'dots_color',
            [
                'label' => __('Färg på navigationsprickar', 'webien'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#f3f3f3',
            ]
        );
        $element->add_control(
            'dots_active_color',
            [
                'label' => __('Färg på navigationsprickar (aktiv)', 'webien'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => '#ffffff',
            ]
        );
        $element->add_control(
            'arrow_left',
            [
                'label' => __('Ikon för vänsterpil', 'webien'),
                'type' => \Elementor\Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-chevron-left',
                    'library' => 'solid',
                ],
            ]
        );
        $element->add_control(
            'arrow_right',
            [
                'label' => __('Ikon för högerrpil', 'webien'),
                'type' => \Elementor\Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-chevron-right',
                    'library' => 'solid',
                ],
            ]
        );

        $element->add_control(
            'arrow_size',
            [
                'label' => __('Storlek på pilar', 'webien'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 200,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 30,
                ],
            ]
        );

        $element->add_control(
            'dots_icon',
            [
                'label' => __('Ikon för navigering', 'webien'),
                'type' => \Elementor\Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-circle',
                    'library' => 'solid',
                ],
            ]
        );


        $element->end_controls_section();


    }

    function add_column_attributes(Element_Base $element) {
        $settings = $element->get_settings();

        $wrapper = get_class($element) === 'Elementor\Element_Section' ? '_wrapper' : '_inner_wrapper';
        $sliderSetting = [];


        if (isset($settings['webien_column_slider']) && $settings['webien_column_slider'] === 'yes') {
            if (isset($settings['section_slider_mobile']) && $settings['section_slider_mobile'] === 'yes') {
                $sliderSetting['viewports'][] = 'mobile';
            }
            if (isset($settings['section_slider_tablet']) && $settings['section_slider_tablet'] === 'yes') {
                $sliderSetting['viewports'][] = 'tablet';
            }
            if (isset($settings['section_slider_desktop']) && $settings['section_slider_desktop'] === 'yes') {
                $sliderSetting['viewports'][] = 'desktop';
            }
        }

        if(!empty($sliderSetting)){

            if(!defined("COLUMN_SLIDER_INIT")){
                define('COLUMN_SLIDER_INIT', 1);
                echo '<script async src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>';
                echo '<style media="all" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"></style>';
                echo '<script defer src="' . WEBIEN_PLUGIN_URL . 'src/Elementor/Extensions/ColumnSlider/js/script.js"></script>';
                // Run javascript and check if we should init slick when ready to add some initial css

            }

            $arrows = 'yes' === $settings['show_arrows'];
            $dots = 'yes' === $settings['show_dots'];
            $speed = $settings['speed']['size'] * 1000;
            $adaptiveHeight = 'yes' === $settings['adaptive_height'];
            $slidesToShow = 1;
            $slidesToScroll = 1;
            $autoplay = 'yes' === $settings['autoplay'];
            $fade = 'yes' === $settings['fade'];
            $autoplaySpeed = (int) $settings['autoplay_time']['size'] * 1000;
            $prevArrow = '<button type="button" class="slick-prev"><i class="' . $settings['arrow_left']['value'] . '" aria-hidden="true"></i> </button>';
            $nextArrow = '<button type="button" class="slick-next"><i class="' . $settings['arrow_right']['value'] . '" aria-hidden="true"></i> </button>';
            $iconColor = $settings['icon_color'];
            $dotsIcon = $settings['dots_icon']['value'];
            $dotsColor = $settings['dots_color'];
            $dotsColorActive = $settings['dots_active_color'];
            $arrowSize = $settings['arrow_size']['size'] . $settings['arrow_size']['unit'];

            // Options
            $options = [
                'dots'=>$dots,
                'arrows'=> $arrows,
                'infinite'=> true,
                'cssEase'=> 'linear',
                'speed'=> $speed,
                'slidesToShow'=> $slidesToShow,
                'slidesToScroll'=> $slidesToScroll,
                'adaptiveHeight'=> $adaptiveHeight,
                'autoplay'=> $autoplay,
                'fade'=> $fade,
                'autoplaySpeed'=> $autoplaySpeed,
                'prevArrow'=> $prevArrow,
                'nextArrow'=> $nextArrow,
            ];
            $sliderSetting = array_merge($sliderSetting, $options);


            $sectionIdClass = 'slider-'.$element->get_id();

            // build specific styles
            echo "<style>
                .$sectionIdClass .slick-dots li i,
                 .$sectionIdClass .slick-dots li svg path{
                    color: $dotsColor;
                    fill: $dotsColor;
                }
                .$sectionIdClass .slick-dots li.slick-active i,
                 .$sectionIdClass .slick-dots li.slick-active svg path{
                    color: $dotsColorActive;
                    fill: $dotsColorActive;
                }
                .$sectionIdClass .slick-prev i,
                .$sectionIdClass .slick-prev svg path,
                .$sectionIdClass .slick-next i,
                .$sectionIdClass .slick-next svg path{
                    color: $iconColor;
                    font-size: $arrowSize !important;
                }
                .$sectionIdClass .slick-prev svg,
                .$sectionIdClass .slick-next svg {
                    width: $arrowSize !important;
                }
            </style>";

            // check for uploaded icon
            if(is_array($dotsIcon)){
                $dotsIconHtml = file_get_contents(get_attached_file( $dotsIcon['id'] ));
            } else {
                $dotsIconHtml = '<i class="' . $dotsIcon . '" aria-hidden="true"></i>';
            }

            $render_arr = ['class' => $sectionIdClass . ' webien-column-slider ', 'column-slider' => json_encode($sliderSetting), 'column-slider-icon' => $dotsIconHtml ];

            $element->add_render_attribute($wrapper, $render_arr);
        }
    }

    function after_render(Element_Base $element) {
        $settings = $element->get_settings();

        $breakpoints = \Elementor\Plugin::$instance->breakpoints->get_breakpoints();

        $maxWidth = false;

        if (isset($settings['webien_column_slider']) && $settings['webien_column_slider'] === 'yes') {
            if (isset($settings['section_slider_mobile']) && $settings['section_slider_mobile'] === 'yes') {
                $maxWidth = $breakpoints['mobile']->get_value();
            }
            if (isset($settings['section_slider_tablet']) && $settings['section_slider_tablet'] === 'yes') {
                $maxWidth = $breakpoints['tablet']->get_value();
            }
            if (isset($settings['section_slider_desktop']) && $settings['section_slider_desktop'] === 'yes') {
                $maxWidth = 100000;
            }
        }





        if ($maxWidth) {
            $sectionIdClass = 'slider-'.$element->get_id();
            echo '<script>if(window.innerWidth < '.$maxWidth.'){let slider = document.getElementsByClassName("'. $sectionIdClass .'")[0]; slider.classList.add("slider-active");}</script>';
        }
    }



}
