<?php

namespace GriffinForms\Admin\Html\FormControls;

class MultiInput extends \GriffinForms\Admin\Html\FormControls\Format
{   
    protected $add_button_id;
    protected $input_type;
    protected $input_container_id;
    protected $input_class;
    
    public function html()
    {
        echo '<div class="griffinforms-multiinput-container row" id="' . esc_attr($this->input_container_id) . '">';
        $this->currentValues();
        echo '</div>';
        $this->addInputBtn();
        
    }

    protected function setInputType()
    {
        if (isset($this->data['input_type'])) {
            return $this->input_type = $this->data['input_type'];
        } else {
            return $this->input_type = 'text';
        }
    }
    
    protected function currentValues()
    {
        // Check if $this->value is an array and not empty
        if (is_array($this->value) && !empty($this->value)) {
            foreach ($this->value as $value) {
                $this->repeatingInput($value);
            }
        } else {
            // If there are no values, print one empty input by default
            $this->repeatingInput();
        }
    }
    
    protected function setAddButtonId()
    {
        return $this->add_button_id = 'griffinforms-' . $this->purgestring($this->name) . '-add';
    }    
    
    protected function setInputContainerId()
    {
        return $this->input_container_id = 'griffinforms-' . $this->purgestring($this->name) . '-container';
    }
        
    protected function setInputClass()
    {
        return $this->input_class = 'griffinforms-' . $this->purgestring($this->name) . '-input';
    }
    
    protected function repeatingInput($value = '')
    {
        $placeholder = isset($this->data['placeholder']) ? $this->data['placeholder'] : '';
        $class = !empty($this->data['app_context'])
            ? 'form-control gf-app-control-input ' . $this->input_class . ' me-3'
            : 'form-control ' . $this->input_class . ' me-3';
        
        echo '<div class="griffinforms-repeating-input col-md-8 mb-1">';
        echo '<input type="' . esc_attr($this->input_type) . '" class="' . esc_attr($class) . '" placeholder="' . esc_attr($placeholder) . '" value="' . esc_attr($value) . '">';
        $this->removeInputBtn();
        echo '</div>'; 
    }    
    
    protected function repeatingInput2($value = '')
    {
        $placeholder = isset($this->data['placeholder']) ? $this->data['placeholder'] : '';
        $class = !empty($this->data['app_context'])
            ? 'form-control gf-app-control-input ' . $this->input_class . ' me-3'
            : $this->input_class . ' me-3';

        $html = '<div class="griffinforms-repeating-input col-md-8 mb-1">';
        $html .= '<input type="' . esc_attr($this->input_type) . '" class="' . esc_attr($class) . '" placeholder="' . esc_attr($placeholder) . '" value="' . esc_attr($value) . '">';
        $html .= '<button type="button" class="gf-remove-multiinput-btn btn btn-sm btn-dark">';
        $html .= $this->mIcon('delete', 'rounded', 'return'); // Assuming mIcon returns the icon as a string
        $html .= '</button>';
        $html .= '</div>'; 
        
        return $html;
    }
    
    protected function addInputBtn()
    {
        echo '<div class="row"><div class="col-md-7 text-center mt-3">';
        echo '<button type="button" id="' . esc_attr($this->add_button_id) . '" class="gf-multiinput-add-btn btn btn-sm btn-dark">';
        $this->mIcon('add');
        echo '</button></div></div>';
        
    }    
    
    protected function removeInputBtn()
    {
        echo '<button type="button" class="gf-remove-multiinput-btn btn btn-sm btn-dark">';
        $this->mIcon('delete');
        echo '</button>';
        
    }
    
    protected function getMax()
    {
        if(isset($this->data['max'])) {
            return $this->data['max'];
        } else {
            return 5;
        }
    }
    
    public function fieldJs()
    {
        $inputHtml = json_encode($this->repeatingInput2());
        
        $js = '
        jQuery(document).ready(function($) {
            
            griffinformsShowAddInput();
            
            var inputHtml = ' . $inputHtml . '; // Input HTML string from PHP
            
            $("#' . esc_js($this->add_button_id) . '").click(function(){
                $("#' . esc_js($this->input_container_id) . '").append(inputHtml);
                griffinformsShowAddInput();
            });
    
            $("#' . esc_js($this->input_container_id) . '").on("click", ".gf-remove-multiinput-btn", function(){
                $(this).parent(".griffinforms-repeating-input").remove();
                griffinformsUpdateMultiInput();
                griffinformsShowAddInput();
            });
            
            $("#' . esc_js($this->input_container_id) . '").on("blur", ".'. esc_js($this->input_class) . '", function(){
                griffinformsUpdateMultiInput();
            });
            
            function griffinformsUpdateMultiInput() {
                var value, values; 
                values = [];
                $(".'. esc_js($this->input_class) . '").each(function(){
                    value = $(this).val();
                    if (value != "") {
                        values.push(value);
                    }
                });
                $("input[name=\'' . esc_js($this->name) . '\']").val(values);
            }
            
            function griffinformsShowAddInput(){
                var inputs = $("#' . esc_js($this->input_container_id) . '").children(".griffinforms-repeating-input").length;

                // Ensure at least one input is rendered
                if (inputs === 0) {
                    $("#' . esc_js($this->input_container_id) . '").html(inputHtml);
                }

                // Hide or show the "Add" button based on max limit
                if (inputs >= ' . absint($this->getMax()) . ') {
                    $("#' . esc_js($this->add_button_id) . '").hide();
                } else {
                    $("#' . esc_js($this->add_button_id) . '").show();
                }                

                // Hide the remove button if there is only one input
                if (inputs === 1) {
                    $(".gf-remove-multiinput-btn").hide();
                } else {
                    $(".gf-remove-multiinput-btn").show();
                }
            }
        });';
        
        wp_add_inline_script('griffinforms-global-js', $js);
    }
}
