/**
 * PaddingFieldEditor
 * FieldValue-aware wrapper for padding, using the canonical 4-side template (PaddingEditor).
 *
 * Protocol:
 * - Padding has no semantic global bucket (today), so this is custom-only.
 * - If legacy data contains a global ref, we resolve it for display and overwrite as custom on edit.
 */
import { t } from '@/lib/i18n'
import { FieldValue, PresetGlobalValues, createCustomValue, resolveFieldValue, isCustomValue } from '../../types/appearance'
import { PaddingEditor } from './PaddingEditor'
import type { CSSUnit } from './NumberWithUnitInput'

export interface PaddingFieldEditorProps {
    label?: string
    value: FieldValue | undefined
    globalValues: PresetGlobalValues
    onChange: (value: FieldValue) => void
    disabled?: boolean
    allowedUnits?: CSSUnit[]
    /** Fallback CSS padding string used when value is missing */
    fallback?: string
}

export function PaddingFieldEditor({
    label = t('Padding'),
    value,
    globalValues,
    onChange,
    disabled = false,
    allowedUnits,
    fallback = '0px',
}: PaddingFieldEditorProps) {
    const resolved =
        (value ? resolveFieldValue(value, globalValues) : null) ||
        (value && isCustomValue(value) ? value.value : null) ||
        fallback

    return (
        <PaddingEditor
            label={label}
            value={resolved}
            onChange={(v) => onChange(createCustomValue(v))}
            disabled={disabled}
            allowedUnits={allowedUnits}
            outputMode="string"
        />
    )
}

export default PaddingFieldEditor


