import { h } from 'preact';
import type { Widget } from '../lib/types';
import { tabLabels } from '../lib/containers';

interface Props {
  widget: Widget;
  onContextMenu?: (e: MouseEvent) => void;
  // View-mode collapse state: supplied (with a toggle) only by the live Canvas.
  // In the editor these are undefined, so the pane always renders expanded.
  collapsed?: boolean;
  onToggleCollapse?: () => void;
  // Tabbed-mode active tab + selector. Supplied by both Canvas (view) and
  // EditCanvas (edit) so tabs can be switched in either mode.
  activeTab?: number;
  onSelectTab?: (i: number) => void;
}

const TITLE_H = 24;

// A purely decorative grouping frame placed behind other widgets on the
// free-form canvas (it does not re-parent them). Two variants:
//  - 'pane': a titled / collapsible frame; collapsing in view mode hides the
//    widgets geometrically inside it and shrinks the pane to its title bar.
//  - 'tabs': a tab bar; only widgets assigned to the active tab are shown.
export default function Container({ widget, onContextMenu, collapsed, onToggleCollapse, activeTab, onSelectTab }: Props) {
  const o = widget.options;
  const variant = o['variant'] === 'tabs' ? 'tabs' : 'pane';
  const showBg = o['bg'] !== 'false';
  const accent = o['accent'] || '#3d4f6e';

  if (variant === 'tabs') {
    const tabs = tabLabels(widget);
    const active = Math.min(Math.max(activeTab ?? 0, 0), tabs.length - 1);
    return (
      <div
        class={`container-pane${showBg ? '' : ' container-pane-nobg'}`}
        style={`left:${widget.x}px;top:${widget.y}px;width:${widget.w}px;height:${widget.h}px;border-color:${accent};`}
        onContextMenu={onContextMenu}
      >
        <div class="container-tab-bar" style={`border-color:${accent};`}>
          {tabs.map((t, i) => (
            <button
              key={i}
              class={`container-tab${i === active ? ' container-tab-active' : ''}`}
              style={i === active ? `border-bottom-color:${accent};` : ''}
              onClick={(e) => { e.stopPropagation(); onSelectTab && onSelectTab(i); }}
              onMouseDown={(e) => e.stopPropagation()}
            >{t}</button>
          ))}
        </div>
      </div>
    );
  }

  const title = o['title'] ?? '';
  const collapsible = o['collapsible'] === 'true';
  // Collapse only applies in view mode (onToggleCollapse present) and when enabled.
  const canCollapse = collapsible && !!onToggleCollapse;
  const isCollapsed = canCollapse && !!collapsed;
  const height = isCollapsed ? TITLE_H : widget.h;
  const hasTitleBar = title !== '' || canCollapse;

  return (
    <div
      class={`container-pane${showBg && !isCollapsed ? '' : ' container-pane-nobg'}`}
      style={`left:${widget.x}px;top:${widget.y}px;width:${widget.w}px;height:${height}px;border-color:${accent};`}
      onContextMenu={onContextMenu}
    >
      {hasTitleBar && (
        <div class="container-pane-title" style={`border-color:${accent};`}>
          {canCollapse && (
            <button
              class="container-collapse-btn"
              title={isCollapsed ? 'Expand' : 'Collapse'}
              onClick={(e) => { e.stopPropagation(); onToggleCollapse!(); }}
              onMouseDown={(e) => e.stopPropagation()}
            >{isCollapsed ? '▸' : '▾'}</button>
          )}
          <span class="container-pane-label">{title}</span>
        </div>
      )}
    </div>
  );
}
