<?php

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

trait InputCheckbox
{
    private function inputCheckboxHtml()
    {
        echo '<div class="griffinforms-field-options-container py-3 griffinforms-inputcheckbox-options-container d-flex align-items-stretch bg-white mt-3 p-2 rounded" id="griffinforms-field-options-container">';

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

        echo '</div>';

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

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

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

    private function inputCheckboxOptionsGroup($pairs = array('' => ''))
    {
        echo '<div class=\'griffinforms-field-optionsgroup griffinforms-inputcheckbox-optionsgroup d-inline-flex flex-column p-2 me-2 rounded\'>';
        echo '<div class=\'griffinforms-inputcheckbox-options-pairs d-flex flex-column py-1\'>';

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

        echo  '</div>';

        $this->addInputCheckboxOption();
        $this->deleteInputCheckboxOptionsGroup();

        echo '</div>';
    }

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

    private function addInputCheckboxOption()
    {
        echo '<div class=\'griffinforms-inputcheckbox-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>';
    }

    private function deleteInputCheckboxOptionsGroup()
    {
        echo '<div class=\'griffinforms-inputcheckbox-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>';
    }

    private function inputCheckboxJs()
    {
        echo '

        optionGroupsSortable();
        optionPairsSortable();

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

        function optionPairsSortable() {
            $(".griffinforms-inputcheckbox-options-pairs").sortable({
            append: "parent",
            cursor: "grabbing",
            opacity: 0.9,
            handle: ".griffinforms-inputcheckbox-options-pair-dragbtn",
            connectWith: ".griffinforms-inputcheckbox-options-pairs",
            start: function (event, ui) {
                    ui.helper.css("transform", "scale(1.01)");
                    ui.helper.css("z-index", "999999");
                },
            stop: function (event, ui) {
                    ui.item.css("transform", "scale(1)");
                }
            });
        }

        function addOptionPair(group) {
            var optionHtml = document.querySelector(".griffinforms-inputcheckbox-option-template").innerHTML;
            group.find(".griffinforms-inputcheckbox-options-pairs").append(optionHtml);
        }

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

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

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

        $(".griffinforms-inputcheckbox-options-container").on("click",".griffinforms-add-option-btn", function(){
            var group = $(this).closest(".griffinforms-inputcheckbox-optionsgroup");
            addOptionPair(group);
        });

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

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


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

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

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

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

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

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

                if (isLast) {
                    addOptionPair(group);
                }
            }
        });
        ';
    }
}
