import { FormProvider, useForm } from 'react-hook-form';
import { useQueryClient } from 'react-query';

import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import * as onboardingsService from 'src/services/onboardingsService';
import { UserOnboardingTask } from 'src/types/onboarding';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { localDateToSimpleDateString } from 'src/utils/timeUtils';

import FormDatePicker from 'src/components/FormInputs/FormDatePicker';

import { usersKeys } from '../../../queries';

type Props = {
  userTask: UserOnboardingTask;
  closeEditModal: () => void;
  userId: number;
};

const EditTask = ({ userTask, closeEditModal, userId }: Props) => {
  const { t } = useLokaliseTranslation('users');
  const queryClient = useQueryClient();
  const form = useForm({
    defaultValues: {
      expirationDate: userTask.expirationDate,
    },
  });

  const handleSubmit = form.handleSubmit(async values => {
    const formattedValues = {
      expirationDate: localDateToSimpleDateString(
        new Date(values.expirationDate),
      ),
    };
    await onboardingsService.updateUserOnboardingTask(
      userId,
      userTask.task.id,
      formattedValues,
    );
    await queryClient.invalidateQueries(usersKeys.userOnboarding(userId));

    closeEditModal();
  });

  return (
    <FormProvider {...form}>
      <form onSubmit={handleSubmit}>
        <DialogTitle>{t('EDIT_TASK_DATE')}</DialogTitle>
        <DialogContent>
          <Typography>{t('TASK_EXPIRATION_DATE')}</Typography>
          <FormDatePicker
            name="expirationDate"
            isStart={false}
          />
        </DialogContent>
        <DialogActions>
          <Button
            variant="outlined"
            onClick={closeEditModal}
          >
            {t('CANCEL')}
          </Button>
          <Button
            loading={form.formState.isSubmitting}
            variant="contained"
            onClick={handleSubmit}
          >
            {t('SAVE')}
          </Button>
        </DialogActions>
      </form>
    </FormProvider>
  );
};

export default EditTask;