import React, {ReactNode, useCallback, useMemo, useState} from 'react';
import {ScrollView, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {
  IconActivity,
  IconChevronRight,
  IconFile,
  IconInbox,
  IconStack2,
} from '@tabler/icons-react-native';
import {
  Accordion,
  Avatar,
  Dialog,
  Divider,
  ListItem,
  Spinner,
  Typography,
} from '@components';
import {User} from '@interfaces/user';
import AssignAgentModal from '@modules/serviceManagement/components/AssignAgentModal';
import {AssigneeButton} from '@modules/serviceManagement/components/AssigneeButton';
import {
  getSlaTimerDescription,
  getTaskSla,
  getServiceManagementDisplayName,
} from '@modules/serviceManagement/utils';
import {
  ServiceManagementTask,
  ServiceManagementTaskType,
} from '@modules/serviceManagement/interfaces';
import ServiceManagementResolutionTimer from '@modules/serviceManagement/components/ServiceManagementResolutionTimer';
import ServiceManagementInformationRow from '@modules/serviceManagement/components/ServiceManagementInformationRow';
import {useUserId} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {
  getCompleteName,
  getCurrentLocale,
  getFormattedDate,
} from '@shared/utils';
import {Screens} from '@shared/constants';
import {FormType, useGetDynamicFormAnswer} from '@shared/dynamicForms';

import ServiceManagementTaskTabFooter from '../ServiceManagementTaskTabFooter';
import {styles} from './styles';
import ServiceManagementTaskActivityList from '../ServiceManagementTaskActivityList';

type ModalType = Nullable<'sla' | 'assignAgent' | 'activity' | 'info'>;

interface Props {
  task: ServiceManagementTask;
  footer?: ReactNode;
  showInitiator?: boolean;
  isAgent: boolean;
  showActivityTabOpen: boolean;
  isActive?: boolean;
}

function ServiceManagementTaskDetailsTab({
  task,
  footer,
  showInitiator,
  isAgent,
  showActivityTabOpen,
  isActive = false,
}: Props) {
  const {t} = useTranslation();
  const userId = useUserId();
  const navigation = useNavigation();
  const {theme} = useTheme();
  const sectionRowStyle = useMemo(
    () => [
      styles.sectionRow,
      {backgroundColor: theme.background.elements.grey},
    ],
    [theme.background.elements.grey],
  );
  const formAnswerParams =
    task.type === ServiceManagementTaskType.Approval
      ? {
          formAnswerId: task.parentTask.formAnswerId,
          formAnswerToken: task.parentTask.formAnswerToken,
          formTag: task.parentTask.catalogItem.formTag,
        }
      : {
          formAnswerId: task.formAnswerId,
          formAnswerToken: task.formAnswerToken,
          formTag: task.catalogItem.formTag,
        };
  const {isLoadingFormData, formData} =
    useGetDynamicFormAnswer(formAnswerParams);
  const sla = getTaskSla(task);
  const slaTimerTitle = t(
    task.state.terminal
      ? 'service_management.resolution_time'
      : 'service_management.time_left',
  );
  const creationDate = getFormattedDate(task.createdAt, 'dd/MMM/yyyy', {
    locale: getCurrentLocale(),
  }).toUpperCase();
  const slaTimerDescription = getSlaTimerDescription({task, sla, isAgent});
  const initiator =
    task.type === ServiceManagementTaskType.Approval
      ? task.parentTask.initiator
      : task.initiator;
  const initiatorName = getServiceManagementDisplayName({
    user: initiator,
    userId,
    t,
  });
  const assigneeName = getServiceManagementDisplayName({
    user: task.assignee,
    userId,
    t,
  });
  const canAssignAgent = isAgent && !task.state.terminal;
  const [visibleModal, setVisibleModal] = useState<ModalType>(
    showActivityTabOpen ? 'activity' : null,
  );
  const onOpenModal = useMemo(
    () => ({
      sla: () => setVisibleModal('sla'),
      assignAgent: () => setVisibleModal('assignAgent'),
      activity: () => setVisibleModal('activity'),
      info: () => setVisibleModal('info'),
    }),
    [],
  );

  const onPressForm = () => {
    if (isLoadingFormData) {
      return;
    }

    formData && formData.form.type === FormType.Pdf
      ? navigation.navigate(Screens.FILE_VISUALIZER, {
          file: formData.pdfFileAsset,
          title: t('service_management.sent_form'),
        })
      : navigation.navigate(
          Screens.SERVICE_MANAGEMENT_SENT_FORM,
          formAnswerParams,
        );
  };

  const onCloseModal = useCallback(() => {
    setVisibleModal(null);
  }, []);

  const handleProfileModal = (user?: User) => {
    user &&
      navigation.navigate(Screens.SERVICE_MANAGEMENT_PROFILE_MODAL, {
        userId: user.id,
        name: getCompleteName(user),
      });
  };

  const handlePressAssigneeProfile = () => {
    handleProfileModal(task.assignee);
  };

  const handlePressInitiatorProfile = () => {
    handleProfileModal(initiator);
  };

  const renderFormRightDescriptor = useCallback(() => {
    return isLoadingFormData ? (
      <Spinner />
    ) : (
      <IconChevronRight color={theme.text.neutral.default} />
    );
  }, [isLoadingFormData, theme.text.neutral.default]);

  return (
    <>
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={{backgroundColor: theme.background.layout.default}}>
        <View style={styles.container}>
          <Accordion initialCollapsed>
            <Accordion.Header>
              <Accordion.Avatar Icon={IconStack2} />
              <Accordion.Title title={t('service_management.request_info')} />
              <Accordion.Icon />
            </Accordion.Header>
            <Accordion.Content>
              {task.type === ServiceManagementTaskType.Approval ? (
                <>
                  <ServiceManagementInformationRow
                    title={t('service_management.approvals.requested_by_short')}
                    onPress={handlePressInitiatorProfile}
                    children={
                      <View style={styles.userRow}>
                        <Avatar
                          size="xs"
                          url={initiator.profilePicture}
                          name={initiatorName}
                        />
                        <Typography variant="xs">{initiatorName}</Typography>
                      </View>
                    }
                  />
                  <Divider />
                  <ServiceManagementInformationRow
                    title={t('service_management.approvals.approval_step')}
                    description={task.name}
                  />
                  <ServiceManagementInformationRow
                    title={t('service_management.approvals.requested_at_short')}
                    description={creationDate}
                  />
                </>
              ) : (
                <>
                  <ServiceManagementInformationRow
                    title={t('service_management.creation_date')}
                    description={creationDate}
                  />
                  {showInitiator && (
                    <ServiceManagementInformationRow
                      title={t('service_management.requester')}
                      onPress={handlePressInitiatorProfile}
                      children={
                        <View style={styles.userRow}>
                          <Avatar
                            size="xs"
                            url={initiator.profilePicture}
                            name={initiatorName}
                          />
                          <Typography variant="xs">{initiatorName}</Typography>
                        </View>
                      }
                    />
                  )}
                  {isAgent && sla && (
                    <ServiceManagementInformationRow title={slaTimerTitle}>
                      <ServiceManagementResolutionTimer
                        sla={sla}
                        state={task.state}
                        onPressInfo={onOpenModal.sla}
                        isAgent={isAgent}
                      />
                    </ServiceManagementInformationRow>
                  )}
                  <Divider />
                  <ServiceManagementInformationRow
                    title={t('service_management.agent')}
                    disablePress={!task.assignee}
                    onPress={handlePressAssigneeProfile}
                    contentContainerStyle={styles.assigneeName}>
                    <AssigneeButton
                      assignee={task.assignee}
                      assigneeName={assigneeName}
                      canAssignAgent={canAssignAgent}
                      onPress={onOpenModal.assignAgent}
                    />
                  </ServiceManagementInformationRow>
                </>
              )}
            </Accordion.Content>
          </Accordion>
          <ListItem
            avatar={{
              Icon: IconInbox,
            }}
            presentation="card"
            title={t('service_management.service_item_info')}
            isLastItem
            isFirstItem
            withRightIcon
            onItemPress={onOpenModal.info}
          />
          <ListItem
            avatar={{
              Icon: IconFile,
            }}
            presentation="card"
            title={t('service_management.sent_form')}
            isLastItem
            isFirstItem
            RightDescriptor={renderFormRightDescriptor}
            onItemPress={onPressForm}
          />
          {isAgent && (
            <ListItem
              avatar={{
                Icon: IconActivity,
              }}
              presentation="card"
              title={t('service_management.activity')}
              isLastItem
              isFirstItem
              withRightIcon
              onItemPress={onOpenModal.activity}
            />
          )}
        </View>
      </ScrollView>
      {footer && (
        <ServiceManagementTaskTabFooter>
          {footer}
        </ServiceManagementTaskTabFooter>
      )}
      <Dialog
        title={
          isAgent && task.state.terminal
            ? t(
                `service_management.${
                  sla?.expired ? 'time_overdue' : 'time_fulfilled'
                }`,
              )
            : slaTimerTitle
        }
        isVisible={!!sla && visibleModal === 'sla' && isActive}
        onClose={onCloseModal}>
        <View style={styles.slaModalContent}>
          {sla && (
            <ServiceManagementResolutionTimer
              sla={sla}
              state={task.state}
              isAgent={isAgent}
            />
          )}
          <Typography>{slaTimerDescription}</Typography>
        </View>
      </Dialog>
      <AssignAgentModal
        selectedTasks={[task]}
        catalogItemId={task.catalogItem.id}
        currentAgent={task.assignee}
        isVisible={visibleModal === 'assignAgent' && isActive}
        onClose={onCloseModal}
      />
      <Dialog
        title={t('service_management.activity')}
        isVisible={visibleModal === 'activity' && isActive}
        onClose={onCloseModal}
        contentStyle={styles.activityModalContent}
        style={styles.activityModalContent}
        wrapperType="scrollable">
        <ServiceManagementTaskActivityList task={task} isAgent={isAgent} />
      </Dialog>
      <Dialog
        title={t('service_management.service_item_info')}
        isVisible={visibleModal === 'info' && isActive}
        onClose={onCloseModal}
        contentStyle={styles.infoModalContent}>
        <View style={sectionRowStyle}>
          <Typography weight="semiBold">
            {t('service_management.description')}
          </Typography>
          <Typography>{task.catalogItem.description}</Typography>
        </View>
        {task.catalogItem.category?.name && (
          <View style={sectionRowStyle}>
            <ServiceManagementInformationRow
              title={t('general.category')}
              description={task.catalogItem.category.name}
            />
          </View>
        )}
      </Dialog>
    </>
  );
}

export default ServiceManagementTaskDetailsTab;