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

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import useSnackbar from '@material-hu/components/design-system/Snackbar';
import Title from '@material-hu/components/design-system/Title';

import { useRequiredAuth } from 'src/contexts/JWTContext';
import useGeneralError from 'src/hooks/useGeneralError';
import { usersKeys } from 'src/pages/dashboard/Users/queries';
import { updateUserStatus } from 'src/services/usersService';
import { type User, UserStatus } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';
import { getFullname } from 'src/utils/userUtils';
import { validatePasswordRule } from 'src/utils/validation';

const ACTIVATE_FORM_DEFAULTS = {
  newPassword: '',
};

export type UseActivateUserDrawerParams = {
  user: User;
};

export const useActivateUserDrawer = ({
  user,
}: UseActivateUserDrawerParams) => {
  const queryClient = useQueryClient();
  const { instance, user: loggedUser } = useRequiredAuth();
  const { t } = useLokaliseTranslation('users');
  const { enqueueSnackbar } = useSnackbar();
  const showGeneralError = useGeneralError();

  const fullName = getFullname(user ?? undefined);

  const form = useForm({
    defaultValues: ACTIVATE_FORM_DEFAULTS,
  });
  const { isDirty } = form.formState;

  const { mutate, isLoading } = useMutation(
    (_: { handleClose: () => void }) => {
      const { newPassword } = form.getValues();
      return updateUserStatus(user.id, {
        newPassword,
        status: UserStatus.UNCLAIMED,
      });
    },
    {
      onSuccess: async (_, { handleClose }) => {
        enqueueSnackbar({
          title: t('user_has_recovered_access'),
          variant: 'success',
        });
        logEvent(LogEvents.USER_REACTIVATION_SUCCESS_VIEWED, {
          targetUserId: user.id,
        });
        await queryClient.invalidateQueries(usersKeys.user(user.id));
        await queryClient.invalidateQueries(usersKeys.all());
        logEvent(LogEvents.USER_STATUS_CHANGE, {
          userId: user.id,
          employeeInternalId: user.employeeInternalId,
          actorId: loggedUser.id,
          status: UserStatus.ACTIVE,
          instanceId: instance.id,
        });
        handleClose();
      },
      onError: (err: unknown) => {
        showGeneralError(err, t('general:error_action'));
      },
    },
  );

  const submit = (handleClose: () => void) =>
    form.handleSubmit(() => mutate({ handleClose }));

  const { drawer: activateUserDrawer, showDrawer } = useDrawerV2(
    ({ closeDrawer }) => {
      const handleClose = () => {
        form.reset(ACTIVATE_FORM_DEFAULTS);
        closeDrawer();
      };

      return {
        title: t('activate_name', { name: fullName }),
        onClose: () => handleClose(),
        primaryButtonProps: {
          children: t('general:activate'),
          onClick: () => {
            submit(handleClose);
            logEvent(LogEvents.USER_REACTIVATED, {
              targetUserId: user.id,
            });
          },
          loading: isLoading,
          disabled: !isDirty,
        },
        secondaryButtonProps: {
          children: t('general:cancel'),
          onClick: handleClose,
        },
        children: (
          <FormProvider {...form}>
            <Stack sx={{ gap: 2 }}>
              <Typography variant="globalS">
                {t('activate_info_body')}
              </Typography>
              <Stack
                sx={{
                  bgcolor: ({ palette }) =>
                    palette.new?.background?.layout?.default,
                  borderRadius: 2,
                  p: 2,
                  gap: 1,
                }}
              >
                <Title
                  title={`${t('new_password')} *`}
                  description={t('password_single_use_warning')}
                />
                <FormInputClassic
                  name="newPassword"
                  rules={{ validate: validatePasswordRule }}
                  inputProps={{
                    placeholder: t('general:write_here'),
                    hasCounter: false,
                    maxLength: 20,
                  }}
                />
              </Stack>
            </Stack>
          </FormProvider>
        ),
      };
    },
  );

  const openActivateUser = () => {
    logEvent(LogEvents.USER_REACTIVATION_DRAWER_VIEWED, {
      targetUserId: user.id,
    });
    showDrawer({});
  };

  return { openActivateUser, activateUserDrawer };
};