import { type FC } from 'react';

import { type SxProps } from '@material-hu/mui/styles';
import { DesktopTimePicker } from '@material-hu/mui/x-date-pickers/DesktopTimePicker';

type TimePickerInputProps = {
  value?: string | Date | null;
  onChange: () => void;
  disabled?: boolean;
  minutesStep?: number;
  sxProps?: SxProps;
};

const TimePickerInput: FC<TimePickerInputProps> = ({
  value,
  onChange,
  minutesStep,
  sxProps,
  ...rest
}) => {
  return (
    <DesktopTimePicker
      value={typeof value === 'string' ? new Date(value) : (value ?? null)}
      onChange={onChange}
      minutesStep={minutesStep}
      ampm={false}
      {...rest}
      slotProps={{
        textField: {
          sx: { width: '100%', ...sxProps },
          disabled: true,
        },
      }}
    />
  );
};

export default TimePickerInput;