import { useTranslation } from 'react-i18next';

import ButtonGroup from '@design-system/ButtonGroup';

import { getMeridiemDate } from '../../Time/utils';

import { type AmPmToolbarProps } from './types';

const AmPmToolbar = ({ value, onChange }: AmPmToolbarProps) => {
  const { t } = useTranslation('material_hu_only');
  const isAM = (value?.getHours() ?? 0) < 12;
  const selectedIndex = value ? Number(!isAM) : null;

  const handleChange = (index: number | null) => {
    if (index === null) return;
    const newDate = getMeridiemDate(value, index === 0);
    if (newDate) onChange(newDate, 'partial');
  };

  return (
    <ButtonGroup
      labels={[t('time_picker.am', 'AM'), t('time_picker.pm', 'PM')]}
      value={selectedIndex}
      onChange={handleChange}
      fullWidth
      showCheckIcon={false}
    />
  );
};

export default AmPmToolbar;