/**
 * Padding Editor Component
 * A visual editor for padding with 4 separate fields (top, right, bottom, left)
 * Similar to Elementor's padding control
 */

import { CSSUnit } from './NumberWithUnitInput'
import { FourSideBoxEditor } from './FourSideBoxEditor'

export interface PaddingValue {
    top: string
    right: string
    bottom: string
    left: string
}

// Support both string and object output modes
type PaddingEditorPropsBase = {
    value: string | PaddingValue
    label?: string
    disabled?: boolean
    className?: string
    allowedUnits?: CSSUnit[]
}

type PaddingEditorPropsString = PaddingEditorPropsBase & {
    outputMode?: 'string'
    onChange: (value: string) => void
}

type PaddingEditorPropsObject = PaddingEditorPropsBase & {
    outputMode: 'object'
    onChange: (value: PaddingValue) => void
}

type PaddingEditorProps = PaddingEditorPropsString | PaddingEditorPropsObject

/**
 * Parse padding string or object into PaddingValue
 * Supports:
 *   - "8px" -> all sides
 *   - "8px 16px" -> vertical horizontal
 *   - "8px 16px 12px" -> top horizontal bottom
 *   - "8px 16px 12px 20px" -> top right bottom left
 *   - { top: "8px", right: "16px", bottom: "8px", left: "16px" }
 */
function parsePadding(input: string | PaddingValue): PaddingValue {
    if (typeof input === 'object' && input !== null) {
        return {
            top: input.top || '0px',
            right: input.right || '0px',
            bottom: input.bottom || '0px',
            left: input.left || '0px',
        }
    }

    const parts = (input || '0px').trim().split(/\s+/)
    
    switch (parts.length) {
        case 1:
            return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] }
        case 2:
            return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] }
        case 3:
            return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1] }
        case 4:
        default:
            return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] || parts[1] }
    }
}

/**
 * Convert PaddingValue to CSS shorthand string
 */
function stringifyPadding(padding: PaddingValue): string {
    const { top, right, bottom, left } = padding
    
    // All same
    if (top === right && right === bottom && bottom === left) {
        return top
    }
    
    // Vertical/horizontal same
    if (top === bottom && right === left) {
        return `${top} ${right}`
    }
    
    // Left/right same
    if (right === left) {
        return `${top} ${right} ${bottom}`
    }
    
    // All different
    return `${top} ${right} ${bottom} ${left}`
}

export function PaddingEditor(props: PaddingEditorProps) {
    const {
        value,
        onChange,
        label,
        disabled = false,
        className = '',
        allowedUnits,
    } = props
    
    const outputMode = 'outputMode' in props ? props.outputMode : 'string'
    const padding = parsePadding(value)

    const emitChange = (newPadding: PaddingValue) => {
        if (outputMode === 'object') {
            (onChange as (value: PaddingValue) => void)(newPadding)
        } else {
            (onChange as (value: string) => void)(stringifyPadding(newPadding))
        }
    }

    return (
        <div className={`space-y-2 ${className}`}>
            <FourSideBoxEditor
                label={label}
                value={padding}
                onChange={(v) => emitChange(v)}
                disabled={disabled}
                allowedUnits={allowedUnits}
            />
        </div>
    )
}

export default PaddingEditor

