<script setup lang="ts">
import { faChevronDown, faChevronUp, faSignInAlt, faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { BBadge } from "bootstrap-vue";
import { computed } from "vue";

import type { InvocationStep } from "@/api/invocations";
import type { WorkflowStepTyped } from "@/api/workflows";
import { isWorkflowInput } from "@/components/Workflow/constants";
import { type GraphStep, statePlaceholders } from "@/composables/useInvocationGraph";
import { useInvocationStore } from "@/stores/invocationStore";

import ToolLinkPopover from "../Tool/ToolLinkPopover.vue";
import WorkflowStepIcon from "./WorkflowStepIcon.vue";
import WorkflowStepTitle from "./WorkflowStepTitle.vue";

interface Props {
    workflowStep: WorkflowStepTyped;
    graphStep?: GraphStep;
    invocationStep?: InvocationStep;
    canExpand?: boolean;
    expanded?: boolean;
}

const props = defineProps<Props>();

const invocationStore = useInvocationStore();

const stepLabel = computed(() => {
    const rawStepLabel = props.invocationStep?.workflow_step_label;
    if (rawStepLabel == null) {
        return undefined;
    }
    return rawStepLabel;
});

const isPolling = computed(() =>
    props.invocationStep ? invocationStore.isLoadingInvocationStep(props.invocationStep.id) : false,
);
</script>

<template>
    <div class="d-flex justify-content-between">
        <div>
            <span :id="`step-icon-${props.workflowStep.id}`">
                <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStep.type" />
            </span>
            <ToolLinkPopover
                v-if="props.workflowStep.tool_id && props.workflowStep.tool_version"
                :target="`step-icon-${props.workflowStep.id}`"
                :tool-id="props.workflowStep.tool_id"
                :tool-version="props.workflowStep.tool_version" />
            <span class="portlet-title-text">
                <u class="step-title">
                    <WorkflowStepTitle
                        :step-index="props.workflowStep.id"
                        :step-label="stepLabel"
                        :step-type="props.workflowStep.type"
                        :step-tool-id="props.workflowStep.tool_id"
                        :step-tool-uuid="props.workflowStep.tool_uuid"
                        :step-subworkflow-id="
                            'workflow_id' in props.workflowStep ? props.workflowStep.workflow_id : null
                        " />
                </u>
            </span>
        </div>

        <span v-if="props.graphStep">
            <BBadge
                v-if="isPolling"
                v-b-tooltip.hover.noninteractive
                class="mr-1"
                title="Polling for updates"
                variant="link">
                <FontAwesomeIcon :icon="faSpinner" spin />
            </BBadge>

            <span v-if="isWorkflowInput(props.workflowStep.type)">
                <i>workflow input</i>
                <FontAwesomeIcon class="ml-1" :icon="faSignInAlt" />
            </span>
            <span v-else-if="props.graphStep.state">
                <i>{{ statePlaceholders[props.graphStep.state] || props.graphStep.state }}</i>
                <FontAwesomeIcon
                    v-if="props.graphStep.headerIcon"
                    class="ml-1"
                    :icon="props.graphStep.headerIcon"
                    :spin="props.graphStep.headerIconSpin" />
            </span>
            <FontAwesomeIcon v-if="props.canExpand" class="ml-1" :icon="props.expanded ? faChevronUp : faChevronDown" />
        </span>
    </div>
</template>
