import { useState } from "@wordpress/element";
import { Button, Icon } from "@wordpress/components";
import { update } from "@wordpress/icons";

const buildPanelClasses = ({ className, isOpen, level, panelType, hasSubpanel, panelName }) => {
  const classes = ["components-panel__body", "zenblocks-panel"];
  if (isOpen) classes.push("is-opened");
  if (level) classes.push(`zenblocks-panel--level-${level}`);
  if (panelType) classes.push(`zenblocks-panel--${panelType}`);
  if (hasSubpanel) classes.push("zenblocks-panel--has-subpanel");
  if (panelName) classes.push(`zenblocks-panel--${panelName}`);
  if (className) classes.push(className);
  return classes.join(" ");
};

const buildTitleClasses = ({ titleClassName, level, panelType, panelName }) => {
  const classes = ["components-panel__body-title", "zenblocks-panel-title"];
  if (level) classes.push(`zenblocks-panel-title--level-${level}`);
  if (panelType) classes.push(`zenblocks-panel-title--${panelType}`);
  if (panelName) classes.push(`zenblocks-panel-title--${panelName}`);
  if (titleClassName) classes.push(titleClassName);
  return classes.join(" ");
};

const PanelBodyWithSync = ({ 
  title, 
  initialOpen = false, 
  opened, 
  onToggle, 
  onSync, 
  className = "", 
  titleClassName = "", 
  level,
  panelType,
  hasSubpanel = false,
  panelName,
  children 
}) => {
  const [internalOpen, setInternalOpen] = useState(initialOpen);
  const isControlled = opened !== undefined;
  const isOpen = isControlled ? opened : internalOpen;

  const handleToggle = () => {
    const newState = !isOpen;
    if (!isControlled) {
      setInternalOpen(newState);
    }
    if (onToggle) {
      onToggle(newState);
    }
  };

  const handleSyncClick = (e) => {
    e.stopPropagation();
    if (onSync) {
      onSync();
    }
  };

  const panelClasses = buildPanelClasses({ className, isOpen, level, panelType, hasSubpanel, panelName });
  const titleClasses = buildTitleClasses({ titleClassName, level, panelType, panelName });

  return (
    <div className={panelClasses}>
      <h2 className={titleClasses}>
        <button type="button" className="components-panel__body-toggle components-button" onClick={handleToggle}>
          <span className="components-panel__body-toggle-text">{title}</span>
          <span className="components-panel__body-toggle-icons">
            {isOpen ? <span className="components-panel__arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M6.5 12.4 12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path></svg></span> : <span className="components-panel__arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="m17.5 11.6-5.5 4.4-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg></span>}
          </span>
        </button>
        {onSync && (
          <Button
            className="zenblocks-sync-button"
            onClick={handleSyncClick}
            label="Sync Settings"
            showTooltip
            tooltipPosition="top"
          >
            <Icon icon={update} size={16} />
          </Button>
        )}
      </h2>
      {isOpen && <div className="components-panel__body-content">{children}</div>}
    </div>
  );
};

export default PanelBodyWithSync;
