import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from 'react-query';
import {KeyboardAwareScrollView} from 'react-native-keyboard-controller';
import {useGoBack} from '@hooks/useGoBack';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Navigation} from '@interfaces/navigation';
import UserHeader from '@modules/form/components/UserHeader';
import {approveOrRejectStep} from '@modules/form/services';
import {formQueryKeys} from '@modules/form/constants';
import {ApproveOrRejectProps, FormStepType} from '@modules/form/interfaces';
import {Screens} from '@shared/constants';

import TextInputWithTitle from './components/TextInputWithTitle';
import CustomizedButton from './components/CustomizedButton';
import {INPUT_MAX_LENGTH} from './constants';
import {styles} from './styles';

function ApproveOrReject({
  route: {
    params: {formId, stepId, decision, templateId, user},
  },
}: Navigation<Screens.APPROVE_OR_REJECT>) {
  const {t} = useTranslation();
  const [message, setMessage] = useState('');
  const queryClient = useQueryClient();
  const {goBack} = useGoBack();
  const paddingBottom = useSafeAreaBottomPadding();
  const {mutate: submit, isLoading} = useMutation(
    (payload: ApproveOrRejectProps) => approveOrRejectStep(payload),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(formQueryKeys.approvalWorkflow(formId));
        goBack();
      },
    },
  );

  return (
    <>
      <UserHeader user={user} />
      <View style={[styles.container, {paddingBottom}]}>
        <KeyboardAwareScrollView
          bounces={false}
          alwaysBounceVertical={false}
          contentContainerStyle={styles.content}>
          <TextInputWithTitle
            title={t('forms.comment_title')}
            placeholder={t('general.write_something')}
            style={styles.input}
            value={message}
            multiline
            onChangeText={text => setMessage(text)}
            maxLength={INPUT_MAX_LENGTH}
            autoCorrect
            autoFocus
          />
        </KeyboardAwareScrollView>
        <CustomizedButton
          onPress={() =>
            submit({
              formId,
              stepId,
              decision,
              message,
              templateId,
            })
          }
          disabled={isLoading}
          loading={isLoading}
          text={t(
            decision === FormStepType.APPROVED
              ? 'forms.approve_form'
              : 'forms.reject_form',
          ).toUpperCase()}
        />
      </View>
    </>
  );
}

export default ApproveOrReject;