import React from 'react';
import { classes, st } from '../../CornerRadiusInput.st.css.js';
import { RoundedCorner } from '@wix/wix-ui-icons-common';
import Input from '../../../Input';
import NumberInput from '../../../NumberInput';
import FormField from '../../../FormField';
import { dataHooks } from '../../CornerRadiusInput.constants';
import { useIcons } from '../../../WixDesignSystemIconThemeProvider';
const Suffix = ({ children }) => {
    return React.createElement(Input.Affix, null, children);
};
const InputField = ({ id, name, position, status, suffix, size, ariaLabel, onInvalid, onChange, value, isLinkingEnabled, linkedOnInvalid, linkedOnChange, linkedOnBlur, min, max, }) => {
    const icons = useIcons('CornerRadiusInputField', {
        RoundedCorner,
    });
    // original icon is top-right
    const cornerIcons = {
        topLeft: (React.createElement(Input.IconAffix, null,
            React.createElement(icons.RoundedCorner, { className: st(classes.cornerIcon, { position: 'topLeft' }) }))),
        topRight: (React.createElement(Input.IconAffix, null,
            React.createElement(icons.RoundedCorner, { className: st(classes.cornerIcon) }))),
        bottomLeft: (React.createElement(Input.IconAffix, null,
            React.createElement(icons.RoundedCorner, { className: st(classes.cornerIcon, { position: 'bottomLeft' }) }))),
        bottomRight: (React.createElement(Input.IconAffix, null,
            React.createElement(icons.RoundedCorner, { className: st(classes.cornerIcon, { position: 'bottomRight' }) }))),
    };
    const dataHook = dataHooks[position];
    const icon = cornerIcons[position];
    return (React.createElement(FormField, { status: status },
        React.createElement(NumberInput, { id: id, name: name, dataHook: dataHook, size: size, prefix: icon, min: min, max: max, suffix: React.createElement(Suffix, null, suffix || 'px'), hideStepper: true, ariaLabel: ariaLabel, value: value, onInvalid: isLinkingEnabled ? linkedOnInvalid : onInvalid, onChange: isLinkingEnabled ? linkedOnChange : onChange, onBlur: () => {
                isLinkingEnabled && linkedOnBlur();
            } })));
};
export { InputField };
//# sourceMappingURL=InputField.js.map