import React, {useCallback} from 'react';
import {ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconInfoSquareRounded} from '@tabler/icons-react-native';
import {
  Avatar,
  CardContainer,
  List,
  ListEmpty,
  ListSkeleton,
} from '@components';
import {useCursorInfinityQuery} from '@hooks/queries-v5/useCursorInfinityQuery';
import {
  ServiceManagementTask,
  ApprovalGroup,
} from '@modules/serviceManagement/interfaces';
import {serviceManagementQueryKeys} from '@modules/serviceManagement/constants';
import {getTaskApprovalGroups} from '@modules/serviceManagement/services';
import {REDUCED_LIMIT} from '@services/constants';
import {useTheme} from '@shared/theme';

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

interface ServiceManagementTaskApprovalsTabProps {
  task: ServiceManagementTask;
}

function ServiceManagementTaskApprovalsTab({
  task,
}: ServiceManagementTaskApprovalsTabProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {
    data: approvalGroups,
    isLoading,
    isError,
    isRefreshing,
    isFetchingNextPage,
    hasNextPage,
    getNextPage,
    refresh,
  } = useCursorInfinityQuery({
    queryKey: serviceManagementQueryKeys.taskApprovalGroups(task.id),
    queryFn: params =>
      getTaskApprovalGroups({taskId: task.id, limit: REDUCED_LIMIT, ...params}),
  });

  const renderItem: ListRenderItem<ApprovalGroup> = useCallback(
    ({item, index}) => {
      return (
        <ApprovalGroupAccordion
          parentTask={task}
          approvalGroup={item}
          initialCollapsed={index === 0}
        />
      );
    },
    [task],
  );

  return (
    <List
      style={styles.listContainer}
      backgroundColor={theme.background.layout.default}
      data={approvalGroups}
      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={t('service_management.approvals.empty.title')}
              description={t('service_management.approvals.empty.description')}
              IconComponent={
                <Avatar
                  size="lg"
                  variant="primary"
                  Icon={IconInfoSquareRounded}
                />
              }
            />
          </CardContainer>
        )
      }
    />
  );
}

export default ServiceManagementTaskApprovalsTab;