import React, {useCallback, useEffect, useRef, useState} from 'react';
import {ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useFocusEffect} from '@react-navigation/native';
import {IconInfoSquareRounded} from '@tabler/icons-react-native';
import {QueryKey, useQueryClient} from '@tanstack/react-query';
import {
  Avatar,
  CardContainer,
  List,
  ListEmpty,
  ListSkeleton,
} from '@components';
import {CursorPageData, CursorPaginatedServiceParams} from '@config/api';
import {useCursorInfinityQuery} from '@hooks/queries-v5/useCursorInfinityQuery';
import {
  GetSubtaskParams,
  ServiceManagementTaskSubtask,
} from '@modules/serviceManagement/interfaces';
import {SubTaskDetailDialog} from '@modules/serviceManagement/components/SubTaskDetailDialog';
import {useTheme} from '@shared/theme';

import {SubtaskCard} from './components/SubtaskCard';
import {styles} from './styles';

interface ServiceManagementTaskSubtasksListProps {
  queryKey: QueryKey;
  queryFn: (
    params: CursorPaginatedServiceParams & GetSubtaskParams,
  ) => Promise<CursorPageData<ServiceManagementTaskSubtask>>;
  description: (task: ServiceManagementTaskSubtask) => string;
  showParentTaskLink?: boolean;
  appliedFiltersCount?: number;
  onPressFilterIcon?: () => void;
  searchText?: string;
  preSelectedSubtaskId?: string;
  isActive?: boolean;
}

export function ServiceManagementTaskSubtasksList({
  queryKey,
  queryFn,
  description,
  showParentTaskLink,
  appliedFiltersCount = 0,
  searchText,
  preSelectedSubtaskId,
  isActive = true,
}: ServiceManagementTaskSubtasksListProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const [selectedSubtask, setSelectedSubtask] =
    useState<Nullable<ServiceManagementTaskSubtask>>(null);
  const subtaskToReopenRef =
    useRef<Nullable<ServiceManagementTaskSubtask>>(null);
  const hasInitializedPreselectedSubtask = useRef(false);

  const queryClient = useQueryClient();
  const {
    data: subtasks,
    isLoading,
    isError,
    isRefreshing,
    isFetchingNextPage,
    hasNextPage,
    getNextPage,
    refresh,
  } = useCursorInfinityQuery({
    queryKey,
    queryFn: (params: CursorPaginatedServiceParams) => queryFn(params),
  });

  const onOpenSubtaskDetail = useCallback(
    (subtask: ServiceManagementTaskSubtask) => {
      setSelectedSubtask(subtask);
    },
    [],
  );

  const onCloseSubtaskDetail = useCallback(() => {
    setSelectedSubtask(null);
  }, []);

  const onBeforeNavigateToParentTask = useCallback(
    (subtask: ServiceManagementTaskSubtask) => {
      onCloseSubtaskDetail();
      subtaskToReopenRef.current = subtask;
    },
    [onCloseSubtaskDetail],
  );

  useFocusEffect(
    useCallback(() => {
      const subtaskToReopen = subtaskToReopenRef.current;
      if (subtaskToReopen) {
        subtaskToReopenRef.current = null;
        setSelectedSubtask(subtaskToReopen);
      }
    }, []),
  );

  useEffect(() => {
    if (hasInitializedPreselectedSubtask.current) {
      return;
    }

    if (preSelectedSubtaskId) {
      const subtask = subtasks?.find(st => st.id === preSelectedSubtaskId);
      if (subtask) {
        setSelectedSubtask(subtask);
        hasInitializedPreselectedSubtask.current = true;
      }
    }
  }, [preSelectedSubtaskId, subtasks]);

  const renderItem: ListRenderItem<ServiceManagementTaskSubtask> = useCallback(
    ({item}) => {
      return (
        <SubtaskCard
          description={description}
          task={item}
          onPress={() => onOpenSubtaskDetail(item)}
        />
      );
    },
    [onOpenSubtaskDetail, description],
  );

  const onTaskUpdate = useCallback(
    (task: ServiceManagementTaskSubtask) => {
      queryClient.invalidateQueries({
        queryKey,
      });
      setSelectedSubtask(task);
    },
    [queryKey, queryClient],
  );

  return (
    <>
      <List
        style={styles.listContainer}
        backgroundColor={theme.background.layout.default}
        data={subtasks}
        renderItem={renderItem}
        isLoading={isLoading}
        isError={isError}
        isRefreshing={isRefreshing}
        isFetchingNextPage={isFetchingNextPage}
        hasNextPage={hasNextPage}
        onNextPage={getNextPage}
        onRefresh={refresh}
        paginationType="infiniteScroll"
        ListEmptyComponent={
          isLoading ? (
            <ListSkeleton presentation="card" />
          ) : (
            <CardContainer>
              <ListEmpty
                title={
                  searchText || appliedFiltersCount > 0
                    ? t(
                        'service_management.no_results_found_search_with_filters',
                      )
                    : t('service_management.subtasks.empty.title')
                }
                description={
                  searchText || appliedFiltersCount > 0
                    ? t('service_management.subtasks.empty.description')
                    : t('service_management.try_again_search_with_filters')
                }
                IconComponent={
                  <Avatar
                    size="lg"
                    variant="primary"
                    Icon={IconInfoSquareRounded}
                  />
                }
              />
            </CardContainer>
          )
        }
      />
      {selectedSubtask && (
        <SubTaskDetailDialog
          task={selectedSubtask}
          showParentTaskLink={showParentTaskLink}
          isVisible={!!selectedSubtask && isActive}
          onClose={onCloseSubtaskDetail}
          onTaskUpdate={onTaskUpdate}
          onBeforeNavigateToParentTask={onBeforeNavigateToParentTask}
        />
      )}
    </>
  );
}