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

import Stack from '@material-hu/mui/Stack';

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

import { acknowledgementsKeys } from 'src/pages/dashboard/Acknowledgements/queries';
import { ajustBalance } from 'src/services/acknowledgementsService';
import {
  type AjustBalanceData,
  AjustBalanceTypes,
  type AjustBalanceValues,
  type Colaborator,
} from 'src/types/acknowledgements';
import { useLokaliseTranslation } from 'src/utils/i18n';

import AjustBalanceForm from './AjustBalanceForm';
import { formatAjustBalanceData } from './utils';

export type AjustBalanceModalProps = {
  onClose: () => void;
  colaborator: Colaborator;
};

const AjustBalanceModal = ({
  onClose,
  colaborator,
}: AjustBalanceModalProps) => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const queryClient = useQueryClient();

  const form = useForm({
    defaultValues: {
      userId: colaborator.id,
      type: AjustBalanceTypes.ADD,
      points: '',
      body: '',
    },
    mode: 'onChange',
  });

  const {
    handleSubmit,
    reset,
    formState: { isSubmitting, isDirty, errors },
  } = form;

  const { mutateAsync, isLoading } = useMutation(
    (values: AjustBalanceData) => ajustBalance(values),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(
          acknowledgementsKeys.colaboratorStats.all(),
        );
        onClose();
      },
    },
  );

  const submit = (values: AjustBalanceValues) => {
    const formattedAjustBalanceData = formatAjustBalanceData(
      colaborator.availablePoints,
      values,
    );
    if (!formattedAjustBalanceData) return;

    mutateAsync(formattedAjustBalanceData);
  };

  const handleCancel = () => {
    onClose();
    reset();
  };

  const isValidForm = Object.keys(errors)?.length <= 0;

  return (
    <FormProvider {...form}>
      <Stack
        component="form"
        onSubmit={event => event.preventDefault()}
        noValidate
        sx={{
          height: '100%',
        }}
      >
        <AjustBalanceForm
          disabled={isSubmitting}
          colaborator={colaborator}
        />
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-around',
            alignItems: 'flex-end',
            flexGrow: 1,
            gap: 1,
            px: 1,
          }}
        >
          <Button
            id="ajust-balance-cancel-button"
            variant="text"
            onClick={handleCancel}
            disabled={isLoading}
            fullWidth
          >
            {t('GENERAL:CANCEL')}
          </Button>
          <Button
            id="ajust-balance-accept-button"
            onClick={handleSubmit(submit)}
            variant="contained"
            disabled={!isDirty || !isValidForm}
            loading={isLoading}
            fullWidth
          >
            {t('GENERAL:SAVE')}
          </Button>
        </Stack>
      </Stack>
    </FormProvider>
  );
};

export default AjustBalanceModal;