import {useCallback} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from 'react-query';
import {Dialog, InputClassic, INPUT_STYLES} from '@components';
import {useGoBack} from '@hooks/useGoBack';
import {TIME_TRACKING_QUERY_KEYS} from '@modules/timeTracking/constants';
import {OvertimeRequestStatus} from '@modules/timeTracking/interfaces';
import {updateOvertimeRequest} from '@modules/timeTracking/services';
import {showSnackbar} from '@redux/dispatchers';

interface Props {
  isVisible: boolean;
  onChangeRevokeReason: (reason: string) => void;
  onClose: () => void;
  requestId: string;
  revokeReason: string;
}

function RevokeRequestDialog({
  isVisible,
  onChangeRevokeReason,
  onClose,
  requestId,
  revokeReason,
}: Props) {
  const {goBack} = useGoBack();
  const {t} = useTranslation();
  const queryClient = useQueryClient();

  const {mutate: revokeApproval, isLoading: isRevokingApproval} = useMutation(
    updateOvertimeRequest,
    {
      onSuccess: () => {
        goBack();
        queryClient.invalidateQueries({
          queryKey: TIME_TRACKING_QUERY_KEYS.historyOvertimeRequestsAll,
        });
        showSnackbar({
          title: t('time_tracker.overtime_request_detail.revoke_success'),
          variant: 'success',
        });
      },
      onError: () => {
        onClose();
        showSnackbar({
          description: t('time_tracker.request_response_error_description'),
          title: t('time_tracker.overtime_request_detail.revoke_error'),
          variant: 'error',
        });
      },
    },
  );

  const onConfirmRevokeApproval = useCallback(() => {
    revokeApproval({
      id: requestId,
      status: OvertimeRequestStatus.REJECTED,
      comment: revokeReason.trim() || undefined,
    });
  }, [requestId, revokeApproval, revokeReason]);

  return (
    <Dialog
      locked
      footer={{
        primaryButton: {
          isLoading: isRevokingApproval,
          onPress: onConfirmRevokeApproval,
          text: t('time_tracker.overtime_request_detail.confirm_revoke'),
        },
        secondaryButton: {
          disabled: isRevokingApproval,
          onPress: onClose,
          text: t('time_tracker.exit_without_saving'),
        },
      }}
      isVisible={isVisible}
      onClose={onClose}
      title={t('time_tracker.overtime_request_detail.revoke')}>
      <InputClassic
        autoFocus
        multiline
        useBottomSheetTextInput
        defaultValue={revokeReason}
        onChangeText={onChangeRevokeReason}
        placeholder={t(
          'time_tracker.overtime_request_detail.revoke_reason_placeholder',
        )}
        scrollEnabled={false}
        style={INPUT_STYLES.longInputSpacing}
      />
    </Dialog>
  );
}

export default RevokeRequestDialog;