<?php

namespace GriffinForms\Admin\App\Html\Widgets\PresentationArea\FormControls;

class InputRadio extends \GriffinForms\Admin\App\Html\Widgets\PresentationArea\FormControls\Format
{
    public function getHtml()
    {
        $this->renderFieldStyles(array('checkbox_radio'));

        echo '<div class="gf-choice-field-wrap d-flex justify-content-start my-2" data-gf-field-id="' . esc_attr($this->item_id) . '">';
        $this->radioOptions();
        echo '</div>';
    }

    private function radioOptions()
    {
        $option_groups = $this->item->getProp('field_options');
        $name_attr     = $this->item->getProp('name') . '-' . $this->item_id;
        $color         = $this->form_theme->getLabelColor();

        if (empty($option_groups)) {
            esc_html_e('There are no options.', 'griffinforms-form-builder');
            return;
        }

        if (!is_array($option_groups)) {
            esc_html_e('Invalid data format. Array expected.', 'griffinforms-form-builder');
            return;
        }

        $total_options = 0;
        foreach ($option_groups as $opts) {
            $total_options += is_array($opts) ? count($opts) : 0;
        }

        $count = 0;

        foreach ($option_groups as $group_index => $options) {
            echo '<div class="gf-choice-field-column flex-column me-3" data-gf-option-group="' . esc_attr($group_index) . '">';

            foreach ($options as $option_name => $option_value) {
                $count      += 1;
                $id_attr     = $name_attr . '-' . $count;
                $is_only     = ($total_options === 1);
                $is_first    = ($count === 1);
                $is_last     = ($count === $total_options);

                echo '<div class="gf-choice-option-row text-start w-100 pb-2"';
                echo ' data-gf-option-label="' . esc_attr($option_name) . '"';
                echo ' data-gf-option-value="' . esc_attr($option_value) . '">';

                $this->renderOptionToolbar($option_value, $is_only, $is_first, $is_last);

                $attributes = $this->getFieldStyleAttributes('checkbox_radio');
                echo '<input class="me-2 gf-checkbox-radio-input" type="radio" value="' . esc_attr($option_value) . '" name="' . esc_attr($name_attr) . '" id="' . esc_attr($id_attr) . '"' . $attributes . '>';
                echo '<span class="gf-choice-option-label align-baseline" contenteditable="true" spellcheck="false"';
                echo ' data-gf-prev-value="' . esc_attr($option_name) . '"';
                echo ' style="color:' . esc_attr($color) . ';">';
                echo esc_html($option_name);
                echo '</span>';

                echo '</div>';
            }

            echo '<div class="gf-choice-field-add-option-wrap">';
            echo '<div class="gf-choice-field-add-option-bar w-100"></div>';
            echo '<button type="button" class="gf-choice-field-add-option-btn"';
            echo ' aria-label="' . esc_attr__('Add option', 'griffinforms-form-builder') . '"';
            echo ' data-gf-option-group="' . esc_attr($group_index) . '">';
            echo '<span class="gf-choice-add-option-icon" aria-hidden="true">+</span>';
            echo '</button>';
            echo '</div>';

            echo '</div>';
        }
    }

    private function renderOptionToolbar($option_value, $is_only = false, $is_first = false, $is_last = false)
    {
        $delete_attr   = $is_only  ? ' disabled' : '';
        $move_up_attr  = $is_first ? ' disabled' : '';
        $move_dn_attr  = $is_last  ? ' disabled' : '';
        echo '<div class="gf-sub-toolbar gf-choice-option-toolbar" role="group" aria-label="' . esc_attr__('Option actions', 'griffinforms-form-builder') . '">';
        echo '<button type="button" class="gf-sub-toolbar-btn gf-choice-option-drag-handle" aria-label="' . esc_attr__('Drag to reorder', 'griffinforms-form-builder') . '">';
        $this->echoToolbarSvg('drag.svg');
        echo '</button>';
        echo '<div class="gf-sub-toolbar-composite">';
        echo '<button type="button" class="gf-sub-toolbar-btn gf-choice-option-move-up"' . $move_up_attr . ' aria-label="' . esc_attr__('Move option up', 'griffinforms-form-builder') . '">';
        $this->echoToolbarSvg('up.svg');
        echo '</button>';
        echo '<button type="button" class="gf-sub-toolbar-btn gf-choice-option-move-down"' . $move_dn_attr . ' aria-label="' . esc_attr__('Move option down', 'griffinforms-form-builder') . '">';
        $this->echoToolbarSvg('down.svg');
        echo '</button>';
        echo '</div>';
        echo '<button type="button" class="gf-sub-toolbar-btn gf-choice-option-value-btn" aria-label="' . esc_attr__('Edit option value', 'griffinforms-form-builder') . '">';
        $this->echoToolbarSvg('option-value.svg');
        echo '</button>';
        echo '<button type="button" class="gf-sub-toolbar-btn gf-choice-option-delete"' . $delete_attr . ' aria-label="' . esc_attr__('Delete option', 'griffinforms-form-builder') . '">';
        $this->echoToolbarSvg('delete-forever.svg');
        echo '</button>';
        echo '</div>';
        echo '<div class="gf-choice-option-value-popover" hidden>';
        echo '<input type="text" class="gf-choice-option-value-input form-control form-control-sm" value="' . esc_attr($option_value) . '" aria-label="' . esc_attr__('Option value', 'griffinforms-form-builder') . '">';
        echo '<div class="gf-choice-option-value-error" hidden></div>';
        echo '</div>';
    }

}
