import { useState } from "@wordpress/element"

const DefaultIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 7V5h16v2M9 19h6M12 5v14" />
    </svg>
);

function Input({
    title = 'Input Label',
    text = 'You can handle the sales notification width.',
    defaultValue = 'Hello World!',
    type = 'text',
    id = '',
    onChange = () => {},
    icon = <DefaultIcon />,
    hint = '',
    min = 0,
    max = null,
    step = 1
}) {
    // Stepper keeps a controlled value for number inputs so the +/- buttons work,
    // while still firing onChange with the same { target: { name, value } } shape
    // every module handler already expects.
    const [num, setNum] = useState(() => {
        const n = parseInt(defaultValue, 10);
        return isNaN(n) ? 0 : n;
    });

    // Mimic a DOM change event so module handlers that call e.preventDefault()
    // and read e.target.{name,value} keep working unchanged.
    const emit = (value) => onChange({
        preventDefault: () => {},
        stopPropagation: () => {},
        target: { name: id, id, value: String(value) },
    });

    const bump = (delta) => {
        let next = num + delta;
        if (min !== null && next < min) next = min;
        if (max !== null && next > max) next = max;
        setNum(next);
        emit(next);
    };

    const onType = (e) => {
        const raw = e.target.value;
        const n = parseInt(raw, 10);
        const val = isNaN(n) ? 0 : n;
        setNum(val);
        emit(val);
    };

    return (
        <div className="strb-offcanvas-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
            {icon && <span className="strb-oc-ico">{icon}</span>}
            <div className="strb-offcanvas-option-content">
                <h4 className="strb-offcanvas-option-title">{title}</h4>
                <p>{text}</p>
            </div>
            <div className="strb-offcanvas-option-action">
                {type === 'number' ? (
                    <div className="strb-oc-stepper">
                        <button type="button" onClick={() => bump(-step)} aria-label="Decrease">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14" /></svg>
                        </button>
                        <input type="number" id={id} name={id} value={num} min={min ?? undefined} max={max ?? undefined} onChange={onType} />
                        <button type="button" onClick={() => bump(step)} aria-label="Increase">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
                        </button>
                    </div>
                ) : (
                    <div className="strb-offcanvas-input">
                        {type !== 'textarea' && <input type={type} defaultValue={defaultValue} id={id} name={id} onChange={onChange} />}
                        {type === 'textarea' && <textarea id={id} name={id} onChange={onChange} defaultValue={defaultValue} />}
                    </div>
                )}
                {hint && <span className="strb-oc-hint">{hint}</span>}
            </div>
        </div>
    )
}

export default Input