ontime/apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx

import { PropsWithChildren } from 'react';
import { InputGroup, Tooltip } from '@chakra-ui/react';

import { tooltipDelayFast } from '../../../../ontimeConfig';
import { cx } from '../../../utils/styleUtils';

import TimeInput from './TimeInput';

import style from './TimeInputWithButton.module.scss';

interface TimeInputWithButtonProps<T extends string> {
  name: T;
  submitHandler: (field: T, value: string) => void;
  time?: number;
  hasDelay?: boolean;
  disabled?: boolean;
  placeholder: string;
}

export default function TimeInputWithButton<T extends string>(props: PropsWithChildren<TimeInputWithButtonProps<T>>) {
  const { name, submitHandler, time, hasDelay, placeholder, disabled, children } = props;

  const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);

  return (
    <InputGroup size='sm' className={inputClasses} width='fit-content'>
      <Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
        <TimeInput<T>
          name={name}
          submitHandler={submitHandler}
          time={time}
          placeholder={placeholder}
          className={style.inputField}
          disabled={disabled}
        />
      </Tooltip>
      {children}
    </InputGroup>
  );
}