import { useFormContext, useWatch } from 'react-hook-form';

import { IconBell } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import MenuList from '@material-hu/components/composed-components/MenuList';
import Avatar from '@material-hu/components/design-system/Avatar';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { ApproversForm } from '..';

type ReminderDaysIntervalCardProps = {
  menuProps: {
    onRemove: () => void;
    onEdit: () => void;
  };
};

const ReminderDaysIntervalCard = ({
  menuProps,
}: ReminderDaysIntervalCardProps) => {
  const { t } = useLokaliseTranslation('time_off');
  const form = useFormContext<ApproversForm>();

  const reminderDaysInterval = useWatch({
    control: form.control,
    name: 'reminderDaysInterval',
  });

  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <Stack
        sx={{
          justifyContent: 'space-between',
          gap: 2,
          flexDirection: 'row',
        }}
      >
        <Stack sx={{ flexDirection: 'row', gap: 2 }}>
          <Avatar
            Icon={IconBell}
            color="primary"
          />
          <HuTitle
            title={t('reminder.send_at_days', {
              days: reminderDaysInterval,
            })}
            description={t('reminder.send_at_helper')}
          />
        </Stack>
        <MenuList
          options={[
            {
              title: t('reminder.edit'),
              onClick: () => {
                menuProps.onEdit();
              },
            },
            {
              title: t('reminder.delete'),
              onClick: () => {
                menuProps.onRemove();
              },
            },
          ]}
        />
      </Stack>
    </CardContainer>
  );
};

export default ReminderDaysIntervalCard;