/**
 * Ein kompakter Farbwähler mit Swatch-Toggle und Popover-ColorPicker.
 * Wird im Inspector mehrfach verwendet (Background, Grid, Ruler, Labels, …).
 */
const { createElement: el, cloneElement } = wp.element;
const { BaseControl, Button, Dropdown, ColorPicker } = wp.components;

export function ColorSwatchPicker({ label, color, onChange, help, id, defaultButton, isEmpty }) {
  const displayColor = color || '#cccccc';
  const swatchStyle = {
    width: 24,
    height: 24,
    borderRadius: 4,
    background: isEmpty ? '#f0f0f0' : displayColor,
    border: isEmpty ? '1px dashed #999' : '1px solid rgba(0,0,0,0.2)',
    boxSizing: 'border-box',
  };
  return el(BaseControl, { label, help, id, __nextHasNoMarginBottom: true },
    el('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
      el(Dropdown, {
        popoverProps: { placement: 'bottom-start' },
        renderToggle: ({ isOpen, onToggle }) =>
          el(Button, {
            onClick: onToggle,
            'aria-expanded': isOpen,
            'aria-label': label,
            style: { padding: 2, minWidth: 28, height: 28 },
          }, el('div', { style: swatchStyle })),
        renderContent: ({ onClose }) =>
          el('div', { style: { padding: '8px' } },
            el(ColorPicker, { color: displayColor, onChange: (hex) => onChange(hex || ''), enableAlpha: false }),
            /* Der Reset-Button wird nach dem Klick ausgehaengt (Wert faellt auf
             * Default zurueck). Das wuerde den Fokus aus dem Popover reissen und
             * die Klick-ausserhalb-Erkennung lahmlegen. Deshalb schliessen wir
             * das Popover beim Reset direkt mit. */
            defaultButton ? el('div', { style: { marginTop: '8px' } },
              cloneElement(defaultButton, {
                onClick: (e) => {
                  if (typeof defaultButton.props.onClick === 'function') defaultButton.props.onClick(e);
                  onClose();
                },
              })
            ) : null),
      })
    )
  );
}
