import type { ComponentChildren } from 'preact';
import { FormGrid } from './FormGrid';
import { NumberField } from './NumberField';

export type DimensionFieldsProps = {
  widthLabel?: string;
  heightLabel?: string;
  widthHint?: string;
  heightHint?: string;
  /** Mark both width and height as required unless individually overridden. */
  required?: boolean;
  widthRequired?: boolean;
  heightRequired?: boolean;
  widthValue?: string | number | null;
  heightValue?: string | number | null;
  placeholder?: string;
  min?: number;
  max?: number;
  step?: number | string;
  className?: string;
  widthRight?: ComponentChildren;
  heightRight?: ComponentChildren;
  onWidthChange?: (raw: string, value: number | undefined) => void;
  onHeightChange?: (raw: string, value: number | undefined) => void;
};

export function DimensionFields({
  widthLabel = 'Width',
  heightLabel = 'Height',
  widthHint,
  heightHint,
  required,
  widthRequired,
  heightRequired,
  widthValue,
  heightValue,
  placeholder,
  min,
  max,
  step,
  className,
  widthRight,
  heightRight,
  onWidthChange,
  onHeightChange,
}: DimensionFieldsProps) {
  return (
    <FormGrid columns={2} className={className}>
      <NumberField
        label={widthLabel}
        hint={widthHint}
        right={widthRight}
        required={widthRequired ?? required}
        min={min}
        max={max}
        step={step}
        value={widthValue ?? ''}
        placeholder={placeholder}
        onValueChange={(value, raw) => onWidthChange?.(raw, value)}
      />
      <NumberField
        label={heightLabel}
        hint={heightHint}
        right={heightRight}
        required={heightRequired ?? required}
        min={min}
        max={max}
        step={step}
        value={heightValue ?? ''}
        placeholder={placeholder}
        onValueChange={(value, raw) => onHeightChange?.(raw, value)}
      />
    </FormGrid>
  );
}
