<?php

namespace GriffinForms\Admin\App\Html\Widgets\RightSidebar;

class Format extends \GriffinForms\Admin\App\Html\Widgets\Format
{
    protected $item_id;
    protected $item;

    protected function itemName()
    {
        $this->propRow(__('Name', 'griffinforms-form-builder'), $this->item->name);
    }

    protected function itemDescription()
    {
        $this->propRow(__('Description', 'griffinforms-form-builder'), $this->item->description);
    }

    protected function itemCreatedOn()
    {
        $date = wp_date($this->config->getDateTimeFormat(), strtotime($this->item->created));
        $this->propRow(__('Created On', 'griffinforms-form-builder'), $date);
    }

    protected function itemCreatedBy()
    {
        $username = __('User not found', 'griffinforms-form-builder');
        $user = get_user_by('id', $this->item->author);

        if ($user !== false) {
            $username = $user->display_name;
        }

        $this->propRow(__('Created By', 'griffinforms-form-builder'), $username);
    }

    protected function accordionHtml(string $title)
    {
        $chevron_right = $this->config->getRootUrl() . 'admin/images/icons/chevron_right.svg';
        echo '<div id="' . esc_attr($this->getHtmlId()) . '" class="accordion-item" style="display:none;">';
          
        echo '<h4 class="accordion-header">';
        echo '<button class="accordion-button p-3" aria-expanded="true" type="button" data-bs-toggle="collapse" data-bs-target="#' . esc_attr($this->getHtmlId('content')) . '">';
        echo '<span class="me-2">' . esc_html($title) . '</span>';
        echo '<div id="' . esc_attr($this->getHtmlId('spinner')) . '" class="spinner-border spinner-border-sm text-primary ms-2" role="status">';
        echo '<span class="visually-hidden">Loading...</span>';
        echo '</div>';
        echo '<img src="' . esc_url($chevron_right) . '" class="gf-accordion-custom-chevron" alt="' . esc_attr__('Expand', 'griffinforms-form-builder') . '" />';        

        echo '</button>';
        echo '</h4>';
    
        echo '<div id="' . esc_attr($this->getHtmlId('content')) . '" class="accordion-collapse collapse show" data-bs-parent="#griffinforms-app-rightsidebar-accordion">';
        echo '<div class="accordion-body p-0">';
        $this->accordionBody();
        echo '</div>';
        echo '</div>';
          
        echo '</div>';
    }

    protected function accordionBody()
    {
        // Placeholder for the accordion body content
    }

    public function getJs()
    {
        $this->widgetJs();
        $this->spinnerJs();
        $this->accordianChevronJs();
    }

    protected function widgetJs()
    {
        // Placeholder for the widget JavaScript logic
    }

    protected function spinnerJs()
    {
        echo 'function showSpinner(show = true) {
            const spinner = document.getElementById("' . esc_js($this->getHtmlId('spinner')) . '");
            if (spinner && show === false) {
                $(spinner).hide();
            } else if (spinner && show === true) {
                $(spinner).show();
            }
        }';
    }

    private function accordianChevronJs()
    {
        echo 'document.querySelectorAll(".accordion-button").forEach(button => {
            const targetId = button.getAttribute("data-bs-target");
            const target = document.querySelector(targetId);
            if (target && target.classList.contains("show")) {
                button.classList.remove("collapsed");
            }
        });';
    }
}
