import React, {useCallback, useEffect} from 'react';
import {View, FlatList, ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useQuery, useMutation} from 'react-query';
import ActivityIndicator from '@components/ActivityIndicator';
import {User} from '@interfaces/user';
import {Navigation} from '@interfaces/navigation';
import UserHeader from '@modules/form/components/UserHeader';
import {formQueryKeys} from '@modules/form/constants';
import {assignMeStep, getFormApprovalWorkflow} from '@modules/form/services';
import {
  ApprovalWorkflow,
  ApprovalWorkflowStep,
  FormStepType,
} from '@modules/form/interfaces';
import {useAppSelector} from '@redux/utils';
import {
  ModulesNotifications,
  clearModuleNotifications,
} from '@shared/notifications';
import {Screens} from '@shared/constants';
import {getLastElement} from '@shared/utils';
import {ERROR} from '@shared/strings';

import HeaderWithId from './components/HeaderWithId';
import {styles} from './styles';
import FormStatusLabel from './components/FormStatusLabel';
import Step from './components/Step';
import HeaderButtons from './components/HeaderButtons';
import {useListenFormStatus} from './useListenFormStatus';
import Footer from './components/Footer';
import {useFetchData} from './useFetchData';

function FormChatDetail({
  navigation,
  route: {params},
}: Navigation<Screens.FORM_CHAT_DETAIL>) {
  const {t} = useTranslation();
  const {id, iAmApprover} = params;
  const userId = useAppSelector(({user}) => user.id);
  const approvalWorkflowQueryKey = formQueryKeys.approvalWorkflow(id);
  const {
    data: approvalWorkflow = {},
    isLoading: isLoadingWorkflow,
    refetch,
  } = useQuery(approvalWorkflowQueryKey, () => getFormApprovalWorkflow(id), {
    onSuccess: approvalWorkflowData =>
      approvalWorkflowData.unreadFinished &&
      clearModuleNotifications(ModulesNotifications.FORM_CHAT, id),
  });

  const {user, isLoadingUser, reviewers, isLoadingReviewers} = useFetchData({
    id,
    approvalWorkflow: approvalWorkflow as ApprovalWorkflow,
  });

  const stepId =
    !!approvalWorkflow.steps?.length &&
    getLastElement(approvalWorkflow.steps).stepId;

  const assignMeMutation = useMutation(
    () => assignMeStep({formId: id, userId, stepId: stepId as number}),
    {
      onSuccess: () =>
        navigation.navigate(Screens.SUCCESS_FORM, {
          ...params,
          text: t('forms.successfully_assigned_step'),
          popQuantity: 2,
          needApproval: true,
        }),
    },
  );

  useEffect(() => {
    const headerTitle = () => (
      <HeaderWithId title={approvalWorkflow.title} id={approvalWorkflow.id} />
    );
    approvalWorkflow.title &&
      navigation.setOptions({
        headerTitle,
      });
  }, [navigation, approvalWorkflow.title, approvalWorkflow.id]);

  useListenFormStatus({id, approvalWorkflowQueryKey, iAmApprover, userId});

  const handlePress = useCallback(() => {
    assignMeMutation.mutate();
  }, [assignMeMutation]);

  const hasUser = user && user !== ERROR;
  const separator = useCallback(() => <View style={styles.separator} />, []);

  const listFooter = useCallback(
    () =>
      stepId &&
      hasUser &&
      approvalWorkflow.approvalStatus !== FormStepType.CANCELLED
        ? Footer({
            iAmApprover,
            approvalWorkflow,
            assignMeMutation,
            handlePress,
            formId: id,
            stepId,
            user,
          })
        : null,
    [
      approvalWorkflow,
      assignMeMutation,
      handlePress,
      hasUser,
      iAmApprover,
      id,
      stepId,
      user,
    ],
  );

  const listHeader = useCallback(
    () => (
      <HeaderButtons
        approvalWorkflow={approvalWorkflow as ApprovalWorkflow}
        iAmApprover={iAmApprover}
        onCannotEdit={refetch}
      />
    ),
    [approvalWorkflow, iAmApprover, refetch],
  );

  const renderItem: ListRenderItem<ApprovalWorkflowStep> = ({item, index}) => {
    const reviewer = reviewers.find(
      r => r && r !== ERROR && r.id === item.lastTransaction?.authorId,
    ) as User;
    return <Step item={{...item, reviewer}} step={index + 1} />;
  };

  return (
    <View style={styles.container}>
      {isLoadingWorkflow || isLoadingUser || isLoadingReviewers ? (
        <ActivityIndicator fullScreen style={styles.activityIndicator} />
      ) : (
        <>
          {iAmApprover && hasUser && <UserHeader user={user} />}
          <FormStatusLabel status={approvalWorkflow.approvalStatus} />
          <FlatList
            bounces={false}
            data={approvalWorkflow.steps}
            keyExtractor={(_item, index) => `${index}`}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.constentStyle}
            ListHeaderComponent={listHeader}
            ListFooterComponent={listFooter}
            ItemSeparatorComponent={separator}
            renderItem={renderItem}
          />
        </>
      )}
    </View>
  );
}

export default FormChatDetail;