import React from 'react';
import {useQuery} from '@hooks/queries-v5/useQuery';
import {Navigation} from '@interfaces/navigation';
import {serviceManagementQueryKeys} from '@modules/serviceManagement/constants';
import {getTaskDetail} from '@modules/serviceManagement/services';
import {useVisitTask} from '@modules/serviceManagement/hooks/useVisitTask';
import ServiceManagementTaskDetailsLayout from '@modules/serviceManagement/components/ServiceManagementTaskDetailsLayout';
import {
  AmplitudeServiceManagementSource,
  ServiceManagementTaskType,
} from '@modules/serviceManagement/interfaces';
import ApprovalTaskActions from '@modules/serviceManagement/components/ApprovalTaskActions';
import ServiceManagementTaskStatusPill from '@modules/serviceManagement/components/ServiceManagementTaskStatusPill';
import {Screens} from '@shared/constants';

function ServicePortalTaskDetails({
  route: {
    params: {id, fistTabKey},
  },
}: Navigation<Screens.SERVICE_PORTAL_TASKS_DETAILS>) {
  const {visitOnce} = useVisitTask();
  const {data, isLoading} = useQuery(
    serviceManagementQueryKeys.taskDetail(id),
    () => getTaskDetail({id}),
    {onSuccess: () => visitOnce(id)},
  );

  return (
    <ServiceManagementTaskDetailsLayout
      task={data}
      isLoading={isLoading}
      firstTabKey={fistTabKey}
      headerButton={
        data ? <ServiceManagementTaskStatusPill task={data} /> : null
      }
      footer={
        data?.type === ServiceManagementTaskType.Approval &&
        !data.state.terminal ? (
          <ApprovalTaskActions
            taskId={data.id}
            parentTaskId={data.parentTask.id}
            parentTaskName={data.parentTask.catalogItem.name}
            source={AmplitudeServiceManagementSource.ApprovalDetails}
          />
        ) : null
      }
    />
  );
}

export default ServicePortalTaskDetails;