import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';
import { useI18n, useTestIds, useUID } from '../../../../hooks';
import StyledInput from '../../../Input/Input.styles';
import { StyledSelect } from '../../../Select/Select';
import { msToTimeUnit, timeUnitToMs } from '../utils';
import StyledDateTime from '../DateTime.styles';
import { StyledFormControl } from '../../../FormControl';
import Flex from '../../../Flex';
import Input from '../../../Input';
import Select, { Option } from '../../../Select';
import { defaultThemeProp } from '../../../../theme';
import { getDurationInputTestIds } from '../../DateTime.test-ids';
import { StyledFormField } from '../../../FormField/FormField';
import { Format } from './DurationInput.types';
export const StyledNumberUnit = styled(StyledDateTime) `
  padding: 0;
  border: 0;
  height: auto;
  ${StyledFormField}:enabled > &:focus-within:not([readonly]) {
    box-shadow: none;
  }
  > ${StyledInput} {
    background-color: transparent;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  > ${StyledSelect} {
    max-width: max-content;
    margin-inline-start: -0.0625rem;
    background-color: transparent;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  &[readonly] > ${StyledSelect} {
    color: currentcolor;
    opacity: 1;
    cursor: default;
  }
  > ${StyledInput}:hover:not([readonly]):not([disabled]) + ${StyledSelect} {
    border-inline-start: transparent;
  }
`;
StyledNumberUnit.defaultProps = defaultThemeProp;
const OPTIONS = [Format.Seconds, Format.Minutes, Format.Hours, Format.Days];
const NumberUnit = (props) => {
    const { testId, defaultValue = 0, value, onChange, format = Format.Seconds, onSelect, disabled, readOnly, required, status, autoFocus, ...restProps } = props;
    const testIds = useTestIds(testId, getDurationInputTestIds);
    const t = useI18n();
    const [valueInMs, setValueInMs] = useState(value ?? defaultValue);
    const [unit, setUnit] = useState(format);
    useEffect(() => {
        setUnit(format);
    }, [format]);
    useEffect(() => {
        if (value !== undefined) {
            setValueInMs(value);
        }
    }, [value]);
    const onNumberInputChange = useCallback((ev) => {
        const inputValue = Number(ev.target.value);
        if (Number.isNaN(inputValue) || inputValue < 0)
            return;
        setValueInMs(timeUnitToMs(inputValue, unit));
    }, [unit]);
    const onInputBlur = useCallback(() => {
        if (!disabled && !readOnly && onChange) {
            onChange(valueInMs);
        }
    }, [valueInMs, onChange]);
    const onInputKeyDown = useCallback((ev) => {
        if (['e', 'E', '+', '-', ',', '.'].includes(ev.key))
            ev.preventDefault();
    }, []);
    const onSelectChange = useCallback((ev) => {
        const selectedValue = ev.target.value;
        setUnit(selectedValue);
        onSelect?.(selectedValue);
    }, [onSelect]);
    const unitOptions = OPTIONS.map(option => (_jsx(Option, { value: option, children: t(`${option}_text`) }, option)));
    const id = useUID();
    return (_jsxs(Flex, { "data-testid": testIds.root, as: StyledNumberUnit, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ...restProps, children: [_jsx(Input, { "data-testid": testIds.controlNumber, type: 'number', placeholder: '0', "aria-labelledby": id, value: `${msToTimeUnit(valueInMs, unit)}`, onChange: onNumberInputChange, onBlur: onInputBlur, onKeyDown: onInputKeyDown, required: required, status: status, readOnly: readOnly, disabled: disabled, autoFocus: autoFocus }, 'number'), _jsx(Select, { "data-testid": testIds.controlUnit, id: id, "aria-label": t('time_unit'), value: unit, required: required, status: status, readOnly: readOnly, disabled: disabled || readOnly, onChange: onSelectChange, children: unitOptions }, 'unit')] }));
};
export default NumberUnit;
//# sourceMappingURL=NumberUnit.js.map