<?php

namespace FluentFormPro\Components;

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

use FluentForm\App\Services\FormBuilder\BaseFieldManager;
use FluentForm\Framework\Helpers\ArrayHelper;

class RangeSliderField extends BaseFieldManager
{
    public function __construct()
    {
        parent::__construct(
            'rangeslider',
            'Range Slider',
            ['range', 'number', 'slider'],
            'advanced'
        );

        add_filter('fluentform/editor_init_element_rangeslider', function ($item) {
            if (!isset($item['settings']['number_step'])) {
                $item['settings']['number_step'] = '';
            }
            return $item;
        });
    }

    function getComponent()
    {
        return [
            'index'          => 15,
            'element'        => $this->key,
            'attributes'     => [
                'name'  => $this->key,
                'class' => '',
                'value' => '',
                'min'   => 0,
                'max'   => 10,
                'type'  => 'range'
            ],
            'settings'       => [
                'number_step'        => '',
                'container_class'    => '',
                'placeholder'        => '',
                'label'              => $this->title,
                'label_placement'    => '',
                'help_message'       => '',
                'admin_field_label'  => '',
                'validation_rules'   => [
                    'required' => [
                        'value'   => false,
                        'message' => __('This field is required', 'fluentformpro'),
                    ]
                ],
                'conditional_logics' => []
            ],
            'editor_options' => [
                'title'      => $this->title,
                'icon_class' => 'dashicons dashicons-leftright',
                'template'   => 'inputSlider'
            ],
        ];
    }

    public function getGeneralEditorElements()
    {
        return [
            'label',
            'admin_field_label',
            'value',
            'min',
            'max',
            'number_step',
            'label_placement',
            'validation_rules',
        ];
    }

    public function render($data, $form)
    {
        $elementName = $data['element'];
        $data = apply_filters_deprecated(
            'fluentform_rendering_field_data_' . $elementName,
            [
                $data,
                $form
            ],
            FLUENTFORM_FRAMEWORK_UPGRADE,
            'fluentform/rendering_field_data_' . $elementName,
            'Use fluentform/rendering_field_data_' . $elementName . ' instead of fluentform_rendering_field_data_' . $elementName
        );
        $data = apply_filters('fluentform/rendering_field_data_' . $elementName, $data, $form);

        if ($tabIndex = \FluentForm\App\Helpers\Helper::getNextTabIndex()) {
            $data['attributes']['tabindex'] = $tabIndex;
        }

        $data['attributes']['class'] = @trim('ff-el-form-control ' . $data['attributes']['class']);
        $data['attributes']['id'] = $this->makeElementId($data, $form);

        $this->registerScripts($form, $data['attributes']['id']);


        if ($data['attributes']['value'] == '') {
            $data['attributes']['value'] = 0;
        }

        if ($step = ArrayHelper::get($data, 'settings.number_step')) {
            $data['attributes']['step'] = $step;
        }

        $data['attributes']['type'] = 'range';
        $data['attributes']['data-calc_value'] = $data['attributes']['value'];
        if (is_rtl()) {
            $data['attributes']['data-direction'] = 'rtl';
        }

        $ariaRequired = 'false';
        if (ArrayHelper::get($data, 'settings.validation_rules.required.value')) {
            $ariaRequired = 'true';
        }

        $elMarkup = "<div class='ff_slider_wrapper'><input " . $this->buildAttributes($data['attributes'], $form) . " aria-invalid='false' aria-required={$ariaRequired}/><div class='ff_range_value'>" . $data['attributes']['value'] . "</div></div>";

        $html = $this->buildElementMarkup($elMarkup, $data, $form);
    
        $html = apply_filters_deprecated(
            'fluentform_rendering_field_html_' . $elementName,
            [
                $html,
                $data,
                $form
            ],
            FLUENTFORM_FRAMEWORK_UPGRADE,
            'fluentform/rendering_field_html_' . $elementName,
            'Use fluentform/rendering_field_html_' . $elementName . ' instead of fluentform_rendering_field_html_' . $elementName
        );

        echo apply_filters('fluentform/rendering_field_html_' . $elementName, $html, $data, $form);
    }

    private function registerScripts($form, $elementId)
    {
        wp_enqueue_script(
            'rangeslider',
            FLUENTFORMPRO_DIR_URL . 'public/libs/rangeslider/rangeslider.js',
            array('jquery'),
            '2.3.0',
            true
        );

        wp_enqueue_style(
            'rangeslider',
            FLUENTFORMPRO_DIR_URL . 'public/libs/rangeslider/rangeslider.css',
            array(),
            '2.3.0',
            'all'
        );

        if (did_action('wp_footer')) {
            $this->printJS($form, $elementId);
        } else {
            add_action('wp_footer', function () use ($form, $elementId) {
                $this->printJS($form, $elementId);
            }, 99);
        }
    }

    private function printJS($form, $elementId)
    {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                function initRangeSlider() {
                    var $element = $('.<?php echo $form->instance_css_class; ?>').find("#<?php echo $elementId ?>");

                    if (!$element.length) {
                        return;
                    }

                    var hasCondition = $element.closest('.ff-el-group').hasClass('has-conditions');
                    var $valueWrapper = $element.parent().find('.ff_range_value');
                    var prevValue = 0;
                    var isRequired = !!$element.parents('.ff-el-group').children('.ff-el-is-required').length;

                    $element.rangeslider({
                        polyfill: false,
                        onSlide: function (position, value) {
                            if (prevValue != value) {
                                //attr added to check range slider is required or not
                                $element.attr('is-changed', true);
                                prevValue = value;
                                $element.trigger('keyup');
                                $valueWrapper.text(value);
                                $element.rangeslider('update', true);
                            }
                        },
                        onInit: function () {
                            if (isRequired) {
                                $element.attr('is-changed', false);
                                $valueWrapper.text('');
                            } else {
                                $valueWrapper.text($element.val());
                            }
                        }
                    });

                    $element.on('change', function () {
                        $valueWrapper.text($element.val());
                        if (hasCondition) {
                            $element.rangeslider('update', true);
                        }
                    });
                }

                initRangeSlider();

                $(document).on('reInitExtras', '.<?php echo $form->instance_css_class; ?>', function () {
                    initRangeSlider();
                });
            });
        </script>
        <?php
    }
}
