<?php

namespace GriffinForms\Admin\Html\FormControls\Field\FieldOptionsTraits;

trait InputRadio
{
    protected function inputRadioHtml()
    {
        echo '<div class="griffinforms-field-options-container py-3 griffinforms-inputradio-options-container d-flex align-items-stretch bg-white p-2 rounded mt-3">';

        if (is_array($this->value)) {
            foreach ($this->value as $pairs) {
                $this->inputRadioOptionsGroup($pairs);
            }
        }

        echo '</div>';

        echo '<div class="griffinforms-inputradio-options-addoptionsgroup justify-content-center d-flex mt-3">';
        echo '<button type="button" class="griffinforms-add-optionsgroup-btn button-primary">' . esc_html($this->lang->getText('add_options_group')) . '</button>';
        echo '</div>';

        echo '<template class="griffinforms-inputradio-option-template">';
        $this->inputRadioOption();
        echo '</template>';

        echo '<template class="griffinforms-inputradio-optionsgroup-template">';
        $this->inputRadioOptionsGroup();
        echo '</template>';
    }

    protected function inputRadioOptionsGroup($pairs = array('' => ''))
    {
        echo '<div class=\'griffinforms-field-optionsgroup griffinforms-inputradio-optionsgroup d-inline-flex flex-column me-2 p-2 rounded\'>';

        echo '<div class=\'griffinforms-inputradio-options-pairs d-flex flex-column py-1\'>';

        foreach ($pairs as $text => $value) {
            $this->inputRadioOption($text, $value);
        }

        echo '</div>';

        $this->addInputRadioOption();
        $this->deleteInputRadioOptionsGroup();

        echo '</div>';
    }

    protected function inputRadioOption($text = '', $value = '')
    {
        echo '<div class=\'griffinforms-field-options-pair griffinforms-inputradio-options-pair d-flex mb-1\'>';
        echo '<div class=\'d-inline-flex align-items-center justify-content-end\'><div class=\'griffinforms-inputradio-options-pair-dragbtn me-2\'>' . wp_kses_post($this->mIcon('drag_indicator', 'rounded', 'return')) . '</div></div>';
        echo '<div class=\'d-inline-flex me-2\'><input class=\'griffinforms-field-optionname griffinforms-inputradio-optionname form-control\' type=\'text\' placeholder=\'' . esc_attr($this->lang->getText('Option Text')) . '\' value=\'' . esc_html($text) . '\'></div>';
        echo '<div class=\'d-inline-flex\'><input class=\'griffinforms-field-optionvalue griffinforms-inputradio-optionvalue form-control\' type=\'text\' placeholder=\'' . esc_attr($this->lang->getText('Option Value')) . '\' value=\'' . esc_html($value) . '\'></div>';
        echo '<div class=\'d-inline-flex\'><button type=\'button\' class=\'griffinforms-inputradio-options-pair-deletebtn ms-1 button button-small\'>' . wp_kses_post($this->mIcon('delete', 'rounded', 'return')) . '</button></div>';
        echo '</div>';
    }

    protected function addInputRadioOption()
    {
        echo '<div class=\'griffinforms-inputradio-addoption-button-wrap d-flex text-center pt-2 justify-content-center mb-3\'>';
        echo '<button type=\'button\' class=\'griffinforms-add-option-btn button\'><small>Add Option</small></button>';
        echo '</div>';
    }

    protected function deleteInputRadioOptionsGroup()
    {
        echo '<div class=\'griffinforms-inputradio-deleteoptionsgroup-button-wrap d-flex text-end pt-2 justify-content-center mt-auto\'>';
        echo '<button type=\'button\' class=\'griffinforms-delete-optionsgroup-btn button\'><small>' . esc_html($this->lang->getText('delete_optionsgroup')) . '</small></button>';
        echo '</div>';
    }

    protected function inputRadioJs()
    {
        echo '

        optionGroupsSortable();
        optionPairsSortable();

        function optionGroupsSortable() {
            $(".griffinforms-inputradio-options-container").sortable({
            cursor: "grabbing",
            axis: "x",
            opacity: 0.9,
            revert: 300,
            start: function (event, ui) {
                    ui.helper.css("transform", "scale(1.01)");
                    ui.helper.addClass("shadow bg-white");
                },
            stop: function (event, ui) {
                    ui.item.css("transform", "scale(1)");
                    ui.item.removeClass("shadow bg-white");
                }
            });
        }

        function optionPairsSortable() {
            $(".griffinforms-inputradio-options-pairs").sortable({
            append: "parent",
            cursor: "grabbing",
            handle: ".griffinforms-inputradio-options-pair-dragbtn",
            opacity: 0.9,
            revert: 300,
            connectWith: ".griffinforms-inputradio-options-pairs",
            start: function (event, ui) {
                    ui.helper.css("transform", "scale(1.01)");
                    ui.helper.addClass("shadow-sm");
                },
            stop: function (event, ui) {
                    ui.item.css("transform", "scale(1)");
                    ui.item.removeClass("shadow-sm");
                }
            });
        }

        $(".griffinforms-inputradio-options-container").on("click", ".griffinforms-inputradio-options-pair-deletebtn", function() {
            var groups = $(".griffinforms-inputradio-optionsgroup");
            var group = $(this).closest(".griffinforms-inputradio-optionsgroup");
            var pairs = group.find(".griffinforms-inputradio-options-pair");

            if (groups.length === 1 && pairs.length === 1) {
                alert("' . esc_js($this->lang->getText('min_options_pairs_limit')) . '");
                return;
            }

            $(this).parents(".griffinforms-inputradio-options-pair").remove();
        });

        $(".griffinforms-inputradio-options-container").on("click",".griffinforms-add-option-btn", function(){
            var optionHtml = document.querySelector(".griffinforms-inputradio-option-template").innerHTML;
            $(this).parent().siblings(".griffinforms-inputradio-options-pairs").append(optionHtml);
        });

        $(".griffinforms-inputradio-options-container").on("click",".griffinforms-delete-optionsgroup-btn", function(){
            var groups = $(".griffinforms-inputradio-optionsgroup");
            if (groups.length > 1) {
                $(this).parents(".griffinforms-inputradio-optionsgroup").remove();
            } else {
                alert("' . esc_js($this->lang->getText('min_options_groups_limit')) . '");
            }
        });

        $(".griffinforms-add-optionsgroup-btn").click(addOptionsGroup);


        function addOptionsGroup() {
            var groupCount = $(".griffinforms-inputradio-options-container .griffinforms-inputradio-optionsgroup").length;
            var maxGroups = 5;

            if (groupCount >= maxGroups) {
                alert("' . esc_js($this->lang->getText('max_options_groups_limit')) . '");
                return;
            }

            var optionsGroupHtml = document.querySelector(".griffinforms-inputradio-optionsgroup-template").innerHTML;
            var scrollPos = groupCount * 400;

            $(".griffinforms-inputradio-options-container").append(optionsGroupHtml);
            $(".griffinforms-inputradio-options-container").animate({ scrollLeft: scrollPos }, 1000);
            optionPairsSortable();
        }

        $(".griffinforms-inputradio-options-container").on("blur", ".griffinforms-inputradio-optionname", function(){
            var optionValue = $(this).closest(".griffinforms-inputradio-options-pair").find(".griffinforms-inputradio-optionvalue");
            if (optionValue.val().trim() === "") {
                var cleanValue = $(this).val().trim().replace(/\s+/g, \'\').toLowerCase();
                optionValue.val(cleanValue);
            }
        });

        $(".griffinforms-inputradio-options-container").on("keydown", ".griffinforms-inputradio-optionname, .griffinforms-inputradio-optionvalue", function(e) {
            if (e.keyCode === 13) {
                e.preventDefault();
                var group = $(this).closest(".griffinforms-inputradio-optionsgroup");
                var pairs = group.find(".griffinforms-inputradio-options-pair");
                var isLast = $(this).closest(".griffinforms-inputradio-options-pair").is(pairs.last());

                if (isLast) {
                    var optionHtml = document.querySelector(".griffinforms-inputradio-option-template").innerHTML;
                    group.find(".griffinforms-inputradio-options-pairs").append(optionHtml);
                }
            }
        });
        ';
    }
}
