import { useTranslation } from 'react-i18next';

import { FormControl, Stack, Typography } from '@mui/material';

import CustomHelperText from '../Base/CustomHelperText';
import CustomLabel from '../Base/CustomLabel';
import InputTime from '../Time';

import { type InputTimeRangeProps, type TimeRangeValue } from './types';

const InputTimeRange = ({
  value,
  onChange,
  label,
  helperText,
  errorText,
  error = false,
  disabled = false,
  fullWidth = false,
  sx = {},
  startProps = {},
  endProps = {},
}: InputTimeRangeProps) => {
  const { t } = useTranslation('material_hu_only');

  const handleStartChange = (newStart: Date | null) => {
    onChange([newStart, value[1]]);
  };

  const handleEndChange = (newEnd: Date | null) => {
    onChange([value[0], newEnd]);
  };

  return (
    <FormControl
      error={error}
      fullWidth={fullWidth}
      disabled={disabled}
      sx={sx}
    >
      <CustomLabel label={label} />
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
        <InputTime
          value={value[0]}
          onChange={handleStartChange}
          disabled={disabled}
          error={error}
          hideErrorText
          {...startProps}
        />
        <Typography sx={{ fontWeight: 'bold', flexShrink: 0, pb: 0.25 }}>
          {t('time_picker.range_separator', 'to')}
        </Typography>
        <InputTime
          value={value[1]}
          onChange={handleEndChange}
          disabled={disabled}
          error={error}
          hideErrorText
          {...endProps}
        />
      </Stack>
      <CustomHelperText
        helperText={error ? errorText : helperText}
        value=""
      />
    </FormControl>
  );
};

export type { InputTimeRangeProps, TimeRangeValue };

export default InputTimeRange;