import {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from 'react-query';
import {Dialog, INPUT_STYLES, InputClassic} from '@components';
import {updateOvertimeStepRequest} from '@modules/timeTracking/services';
import {TIME_TRACKING_QUERY_KEYS} from '@modules/timeTracking/constants';
import {TimeOffStepState} from '@modules/timeOff/interfaces';
import {showSnackbar} from '@redux/dispatchers';

interface Props {
  onClose: () => void;
  requestAction: TimeOffStepState;
  requestId: string;
  stepId: string;
}

function RequestActionDialog({
  onClose,
  requestAction,
  requestId,
  stepId,
}: Props) {
  const {t} = useTranslation();
  const queryClient = useQueryClient();
  const [reason, setReason] = useState('');
  const isApprove = requestAction === TimeOffStepState.APPROVED;

  const {mutate: updateRequestStatus, isLoading: isUpdatingRequest} =
    useMutation(updateOvertimeStepRequest, {
      onSuccess: () => {
        onClose();
        queryClient.invalidateQueries({
          queryKey: TIME_TRACKING_QUERY_KEYS.pendingOvertimeRequestsAll,
        });
        showSnackbar({
          title: t('time_tracker.response_completed_successfully'),
          variant: 'success',
        });
      },
      onError: () => {
        showSnackbar({
          description: t('time_tracker.request_response_error_description'),
          title: t('time_tracker.request_response_error'),
          variant: 'error',
        });
      },
    });

  const onConfirmAction = () => {
    updateRequestStatus({
      id: requestId,
      approvalStepId: stepId,
      state: requestAction,
      comment: reason || undefined,
    });
  };

  return (
    <Dialog
      footer={{
        primaryButton: {
          isLoading: isUpdatingRequest,
          onPress: onConfirmAction,
          text: t(isApprove ? 'general.approve' : 'general.reject'),
        },
        secondaryButton: {
          disabled: isUpdatingRequest,
          onPress: onClose,
          text: t('general.cancel'),
        },
      }}
      isVisible={!!requestId}
      onClose={onClose}
      title={t('approval_requests.response_reason')}>
      <InputClassic
        useBottomSheetTextInput
        multiline
        defaultValue={reason}
        onChangeText={setReason}
        placeholder={t('time_tracker.approvals.write_comments_placeholder')}
        style={INPUT_STYLES.longInputSpacing}
      />
    </Dialog>
  );
}

export default RequestActionDialog;