import React, {useCallback, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Dialog, InputSearch, List, ListRow, Typography} from '@components';
import {User} from '@interfaces/user';
import {useDebouncedSearchText} from '@modules/serviceManagement/hooks/useDebouncedSearchText';
import {ServiceManagementTask} from '@modules/serviceManagement/interfaces';
import {getServiceManagementDisplayName} from '@modules/serviceManagement/utils';
import {useUserId} from '@redux/selectors';
import {getCompleteName} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {ServiceManagementErrorMessage} from '../ServiceManagementErrorMessage';
import {styles} from './styles';
import {useAssignAgentHandler} from './hooks/useAssignAgentHandler';

interface Props {
  catalogItemId: string;
  currentAgent?: User;
  isVisible: boolean;
  onClose: () => void;
  selectedTasks: ServiceManagementTask[];
  onSuccess?: () => void;
}

const keyExtractor = (item: User) => `candidate-agent-${item.id.toString()}`;

function AssignAgentModal({
  catalogItemId,
  currentAgent,
  isVisible,
  onClose,
  selectedTasks,
  onSuccess,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const isMultipleAssignment = selectedTasks.length > 1;
  const [selectedAgent, setSelectedAgent] = useState<User>();
  const [filterText, setFilterText] = useState('');
  const agentName = useDebouncedSearchText(filterText);
  const userId = useUserId();
  const newAgentName = getServiceManagementDisplayName({
    user: selectedAgent,
    userId,
    t,
  });
  const currentAgentName = getServiceManagementDisplayName({
    user: currentAgent,
    userId,
    t,
  });

  const onCloseModal = () => {
    setSelectedAgent(undefined);
    onClose();
    setFilterText('');
  };

  const {
    onPressAssignTask,
    data,
    getNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isPendingAssignTask,
    isRefreshing,
  } = useAssignAgentHandler({
    catalogItemId,
    isMultipleAssignment,
    onCloseModal,
    selectedTasks,
    agentName,
    onSuccess,
    selectedAgent,
  });

  const renderItem = useCallback(
    ({item}: {item: User}) => {
      const completeName = getCompleteName(item);
      const isCurrentAgent = item.id === currentAgent?.id;
      const onPress = () => setSelectedAgent(item);

      return (
        <ListRow
          onPress={onPress}
          style={styles.userRow}
          {...(isCurrentAgent && {
            backgroundColor: theme.background.elements.overlay,
          })}
          disabled={isCurrentAgent}>
          <ListRow.Avatar name={completeName} url={item.profilePicture} />
          <ListRow.Title title={completeName} />
        </ListRow>
      );
    },
    [currentAgent?.id, theme.background.elements.overlay],
  );

  return (
    <Dialog
      isVisible={isVisible}
      onClose={onCloseModal}
      {...(selectedAgent && {
        footer: {
          primaryButton: {
            text: t('service_management.assign'),
            onPress: onPressAssignTask,
            isLoading: isPendingAssignTask,
            disabled: isPendingAssignTask,
          },
          secondaryButton: {
            text: t('general.cancel'),
            onPress: onCloseModal,
            disabled: isPendingAssignTask,
          },
        },
      })}
      title={
        selectedAgent && isMultipleAssignment
          ? t('service_management.assign_tickets', {
              count: selectedTasks.length,
              agent: newAgentName,
            })
          : t('service_management.change_agent', {
              agentName: newAgentName,
            })
      }>
      {selectedAgent ? (
        <View style={styles.confirmAgentContainer}>
          <Typography>
            {currentAgentName &&
              `${t('service_management.current_agent_warning', {
                currentAgentName,
                newAgentName,
              })} `}
            {`${t(
              `service_management.${
                isMultipleAssignment
                  ? 'ticket_assignment_confirmation'
                  : 'ensure_correct_assignment'
              }`,
            )}`}
          </Typography>
        </View>
      ) : (
        <View style={styles.container}>
          <InputSearch
            value={filterText}
            onChangeText={setFilterText}
            placeholder={t('service_management.search')}
            useBottomSheetTextInput
            style={styles.search}
          />
          <List
            data={data}
            keyExtractor={keyExtractor}
            renderItem={renderItem}
            onNextPage={getNextPage}
            hasNextPage={hasNextPage}
            isFetchingNextPage={isFetchingNextPage}
            isLoading={isLoading}
            isRefreshing={isRefreshing}
            ListEmptyComponent={
              filterText ? (
                <ServiceManagementErrorMessage
                  title={t('service_management.no_results_found')}
                  body={t(
                    'service_management.agent_autocomplete_no_results_description',
                  )}
                />
              ) : null
            }
          />
        </View>
      )}
    </Dialog>
  );
}

export default AssignAgentModal;