import * as React from 'react';
import { useKnobTheme } from '../core/theme';

export interface LabeledFieldProps {
  /** Field name printed beside the control. */
  label: string;
  /** The control (a knob, fader, ScrubField, ToggleSwitch, …). */
  children: React.ReactNode;
  /** Unit printed after the control, e.g. "px", "dB". */
  unit?: string;
  /**
   * Label column width — set the same value on a stack of fields so their
   * controls line up. Number = px. Default: auto.
   */
  labelWidth?: number | string;
  /** 'row' (label · control · unit, default) or 'column' (label above). */
  orientation?: 'row' | 'column';
  /** Push the control to the right edge of the row. Default: false. */
  spread?: boolean;
  gap?: number;
  labelColor?: string;
  className?: string;
  style?: React.CSSProperties;
}

/**
 * One aligned inspector row: a label, a control and an optional unit. Give a
 * stack of fields the same `labelWidth` and their controls line up — the
 * boilerplate every properties panel rewrites, owned in one place.
 */
export const LabeledField: React.FC<LabeledFieldProps> = ({
  label,
  children,
  unit,
  labelWidth,
  orientation = 'row',
  spread = false,
  gap = 10,
  labelColor,
  className,
  style,
}) => {
  const theme = useKnobTheme();
  const column = orientation === 'column';
  const labelEl = (
    <span
      style={{
        flex: 'none',
        width: column ? undefined : labelWidth,
        fontFamily: theme.fontUI,
        fontSize: 11,
        letterSpacing: '0.05em',
        textTransform: 'uppercase',
        color: labelColor ?? theme.label,
        whiteSpace: 'nowrap',
      }}
    >
      {label}
    </span>
  );

  return (
    <div
      className={className}
      style={{
        display: 'flex',
        flexDirection: column ? 'column' : 'row',
        alignItems: column ? 'flex-start' : 'center',
        gap: column ? 4 : gap,
        ...style,
      }}
    >
      {labelEl}
      <div
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          marginLeft: spread && !column ? 'auto' : undefined,
        }}
      >
        {children}
        {unit && (
          <span style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.label, whiteSpace: 'nowrap' }}>
            {unit}
          </span>
        )}
      </div>
    </div>
  );
};