import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { Icon, chevronUp, chevronDown } from "@wordpress/icons";

export default function CustomSection({
    title,
    children,
    columns,
    collapsible = false,
    initialOpen = true,
    helpUrl = "",
    helpLabel = "",
}) {
    const [isOpen, setIsOpen] = useState(initialOpen);

    const bodyClass = columns
        ? `ekesto-settings-panel__body ekesto-settings-panel__body--${columns}-columns`
        : "ekesto-settings-panel__body";
    const resolvedHelpLabel = helpLabel || __("Open help", "cache-autopilot");

    let headerClass = "ekesto-settings-panel__header";
    if (collapsible) {
        headerClass += " ekesto-settings-panel__header--collapsible";
        if (isOpen) {
            headerClass += " ekesto-settings-panel__header--open";
        }
    }

    const shouldIgnoreHeaderToggle = (target) => {
        if (!(target instanceof Element)) {
            return false;
        }

        return Boolean(
            target.closest(
                "a, button, input, select, textarea, [data-no-panel-toggle='true']",
            ),
        );
    };

    const handleHeaderClick = (event) => {
        if (!collapsible || shouldIgnoreHeaderToggle(event.target)) {
            return;
        }

        setIsOpen((prev) => !prev);
    };

    const handleHeaderKeyDown = (e) => {
        if (
            !collapsible ||
            shouldIgnoreHeaderToggle(e.target) ||
            (e.key !== "Enter" && e.key !== " ")
        ) {
            return;
        }

        e.preventDefault();
        setIsOpen((prev) => !prev);
    };

    return (
        <div className='ekesto-settings-panel'>
            {title && (
                <div
                    className={headerClass}
                    onClick={handleHeaderClick}
                    onKeyDown={handleHeaderKeyDown}
                    {...(collapsible ? {
                        role: "button",
                        tabIndex: 0,
                        "aria-expanded": isOpen,
                    } : {})}
                >
                    <div className='ekesto-settings-panel__header-main'>
                        <h2 className='ekesto-settings-panel__header-title'>{title}</h2>
                        {helpUrl && (
                            <a
                                className='ekesto-settings-panel__header-help'
                                href={helpUrl}
                                target='_blank'
                                rel='noopener noreferrer'
                                aria-label={resolvedHelpLabel}
                                data-no-panel-toggle='true'
                            >
                                <span
                                    className='dashicons dashicons-editor-help'
                                    aria-hidden='true'
                                />
                            </a>
                        )}
                    </div>
                    {collapsible && (
                        <Icon
                            icon={isOpen ? chevronUp : chevronDown}
                            className='ekesto-settings-panel__header-icon'
                        />
                    )}
                </div>
            )}
            {isOpen && <div className={bodyClass}>{children}</div>}
        </div>
    );
}
