import React, {useCallback, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {InputSearch} from '@components/_HuGo';
import {CursorPaginatedServiceParams} from '@config/api/interfaces';
import {ServiceManagementTaskSubtask} from '@modules/serviceManagement/interfaces';
import {
  serviceManagementQueryKeys,
  SUBTASK_PREFIX,
} from '@modules/serviceManagement/constants';
import {getTaskSubtasks} from '@modules/serviceManagement/services';
import {getServiceManagementDisplayName} from '@modules/serviceManagement/utils';
import {useDebouncedSearchText} from '@modules/serviceManagement/hooks/useDebouncedSearchText';
import {useUserId} from '@redux/selectors';
import {REDUCED_LIMIT} from '@services/constants';
import {commonStyles} from '@shared/styles';

import {ServiceManagementTaskSubtasksList} from '../ServiceManagementTaskSubtasksList';
import {styles} from './styles';

const ENABLE_SEARCH = false;

interface ServiceManagementTaskSubtaskstabProps {
  task: ServiceManagementTaskSubtask;
  isActive?: boolean;
}

export function ServiceManagementTaskSubtasksTab({
  task,
  isActive = false,
}: ServiceManagementTaskSubtaskstabProps) {
  const userId = useUserId();
  const {t} = useTranslation();
  const [searchText, setSearchText] = useState('');
  const debouncedSearchText = useDebouncedSearchText(searchText);
  const queryFn = useCallback(
    (params: CursorPaginatedServiceParams) => {
      return getTaskSubtasks({
        taskId: task.id,
        limit: REDUCED_LIMIT,
        text: debouncedSearchText,
        ...params,
      });
    },
    [task.id, debouncedSearchText],
  );

  const description = useCallback(
    (taskItem: ServiceManagementTaskSubtask) => {
      const assigneeName = getServiceManagementDisplayName({
        user: taskItem.assignee,
        userId,
        t,
      });

      return `${SUBTASK_PREFIX}${taskItem.taskNumber}${
        assigneeName ? ` • ${assigneeName}` : ''
      }`;
    },
    [t, userId],
  );

  return (
    <View style={commonStyles.flex}>
      {ENABLE_SEARCH && (
        <InputSearch
          style={styles.search}
          value={searchText}
          onChangeText={setSearchText}
          placeholder={t('service_management.search_ticket')}
        />
      )}
      <ServiceManagementTaskSubtasksList
        searchText={debouncedSearchText}
        description={description}
        queryKey={serviceManagementQueryKeys.taskSubtasks(task.id)(
          debouncedSearchText,
        )}
        queryFn={queryFn}
        isActive={isActive}
      />
    </View>
  );
}