import { __rest } from '../../_virtual/_tslib.js';
import React__default, { forwardRef, useState, useEffect } from 'react';
import AlertTriangle from '../../icons/AlertTriangle.js';
import Minus from '../../icons/Minus.js';
import Plus from '../../icons/Plus.js';
import { IconButton } from '../IconButton/index.js';
import { getId, noop, isDifferentFromUndefinedOrNull } from '../../utils/index.js';
import { Wrapper, FocusBorder, Border, NumberField } from './styles.js';
import { LabelWrapper, Label, Text, SupportingText, ErrorMessage, AssistMessage } from '../Field/styles.js';

function StepperComponent(_a, ref) {
    var { step = 1, min, max, value, id, label, optionalText, name, errorText, assistText, onChange = noop, touched, disabled = false, required = true, hasError = false, fullWidth = false, stepperVariant = 'default', componentHeight = 'medium', iconButtonVariant = 'ghost' } = _a, props = __rest(_a, ["step", "min", "max", "value", "id", "label", "optionalText", "name", "errorText", "assistText", "onChange", "touched", "disabled", "required", "hasError", "fullWidth", "stepperVariant", "componentHeight", "iconButtonVariant"]);
    const [showError, setShowError] = useState(false);
    const appendTestId = getId(props['data-testid']);
    const appendTrackId = getId(props['data-testid']);
    const handleChange = (value) => {
        if (onChange)
            onChange(value);
    };
    const handleSub = () => {
        let newValue;
        if (isDifferentFromUndefinedOrNull(min)) {
            if (value > min) {
                if (value - step < min) {
                    newValue = min;
                }
                else {
                    newValue = value - step;
                }
            }
            else {
                newValue = value;
            }
        }
        else {
            newValue = value - step;
        }
        newValue !== value && handleChange(newValue);
    };
    const handleAdd = () => {
        let newValue;
        if (isDifferentFromUndefinedOrNull(max)) {
            if (value < max) {
                if (value + step > max) {
                    newValue = max;
                }
                else {
                    newValue = value + step;
                }
            }
            else {
                newValue = value;
            }
        }
        else {
            newValue = value + step;
        }
        newValue !== value && handleChange(newValue);
    };
    useEffect(() => {
        const composeError = typeof touched === 'undefined' ? hasError : hasError && touched;
        setShowError(composeError);
    }, [hasError, touched]);
    return (React__default.createElement(Wrapper, { fullWidth: fullWidth, "data-testid": `${props['data-testid']}-stepper` },
        React__default.createElement(LabelWrapper, { disabled: disabled, hasLabel: Boolean(label === null || label === void 0 ? void 0 : label.length) },
            label && (React__default.createElement(Label, { htmlFor: id || `input-${name}`, disabled: disabled }, label)),
            !required && React__default.createElement(Text, null, optionalText)),
        React__default.createElement(FocusBorder, null,
            React__default.createElement(Border, { hasError: showError, disabled: disabled, stepperVariant: stepperVariant },
                React__default.createElement(IconButton, { onClick: handleSub, variant: iconButtonVariant, size: componentHeight, icon: React__default.createElement(Minus, null), disabled: disabled || value - step < min, "aria-label": `Remove ${step}`, "aria-labelledby": "step-decrement label-text", "data-testid": appendTestId('stepper-minus-button'), "data-trackid": appendTrackId('stepper-minus-button') }),
                React__default.createElement(NumberField, { buttonsDisabled: disabled, ref: ref, id: id || (name && `input-${name}`), type: "number", value: value, min: min, max: max, name: name, disabled: true, componentHeight: componentHeight, stepperVariant: stepperVariant, hasError: showError, "aria-label": props['aria-label'] || label, "aria-live": "polite", "aria-labelledby": "label-number", "data-testid": appendTestId('stepper-number-field'), "data-trackid": appendTrackId('stepper-number-field') }),
                React__default.createElement(IconButton, { onClick: handleAdd, variant: iconButtonVariant, size: componentHeight, icon: React__default.createElement(Plus, null), disabled: disabled || value + step > max, "aria-label": `Add ${step}`, "aria-labelledby": "step-increment label-text", "data-testid": appendTestId('stepper-plus-button'), "data-trackid": appendTrackId('stepper-plus-button') }))),
        React__default.createElement(SupportingText, null,
            Boolean(errorText) &&
                showError &&
                !disabled &&
                (stepperVariant === null || stepperVariant === void 0 ? void 0 : stepperVariant.includes('input')) && (React__default.createElement(ErrorMessage, null,
                React__default.createElement(AlertTriangle, { width: 20, height: 20 }),
                errorText)),
            !showError &&
                (typeof assistText === 'string' ? (React__default.createElement(AssistMessage, null, assistText)) : (assistText)))));
}
const Stepper = forwardRef(StepperComponent);

export { Stepper };
