MissionRestartButton.tsx

import { Button, EdsProvider, Icon, Menu } from '@equinor/eds-core-react'
import { Icons } from 'utils/icons'
import { useNavigate } from 'react-router'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
import styled from 'styled-components'
import { useContext, useState } from 'react'
import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert'
import { Mission } from 'models/Mission'
import { AlertCategory } from 'components/Alerts/AlertsBanner'
import { InspectionAreaVerificationDialog } from '../InspectionAreaVerificationDialogs/InspectionAreaVerificationDialog'
import {
    getInspectionAreaDialogType,
    InspectionAreaDialogType,
} from '../InspectionAreaVerificationDialogs/getInspectionAreaDialogType'
import { useBackendApi } from 'api/UseBackendApi'
import { InstallationContext } from 'components/Contexts/InstallationContext'
import { useAssetContext } from 'components/Contexts/AssetContext'

const Centered = styled.div`
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
`
const StyledButton = styled(Button)`
    background-color: none;
    height: 36px;
`

interface MissionProps {
    mission: Mission
    hasFailedTasks: boolean
    smallButton: boolean
}

enum ReRunOptions {
    ReRun,
    ReRunFailed,
}

export const MissionRestartButton = ({ mission, hasFailedTasks, smallButton }: MissionProps) => {
    const { TranslateText } = useLanguageContext()
    const { installation } = useContext(InstallationContext)
    const { enabledRobots } = useAssetContext()
    const { setAlert, setListAlert } = useAlertContext()
    const [isOpen, setIsOpen] = useState<boolean>(false)
    const [isLocationVerificationOpen, setIsLocationVerificationOpen] = useState<boolean>(false)
    const [verificationDialogType, setVerificationDialogType] = useState<InspectionAreaDialogType | null>(null)
    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)

    const liveRobot = enabledRobots.find((robot) => robot.id === mission.robot.id)

    const navigate = useNavigate()
    const navigateToHome = () => {
        const path = `/${installation.installationCode}`
        navigate(path)
    }
    const backendApi = useBackendApi()

    const startReRun = (option: ReRunOptions) => {
        backendApi
            .reRunMission(mission.id, option === ReRunOptions.ReRunFailed)
            .then(() => navigateToHome())
            .catch(() => {
                setAlert(
                    AlertType.RequestFail,
                    <FailedRequestAlertContent translatedMessage={TranslateText('Failed to rerun mission')} />,
                    AlertCategory.ERROR
                )
                setListAlert(
                    AlertType.RequestFail,
                    <FailedRequestAlertListContent translatedMessage={TranslateText('Failed to rerun mission')} />,
                    AlertCategory.ERROR
                )
            })
        setIsLocationVerificationOpen(false)
    }

    const selectRerunOption = (rerunOption: ReRunOptions) => {
        const dialogType = getInspectionAreaDialogType(liveRobot, [mission.inspectionArea])

        if (dialogType === null) {
            startReRun(rerunOption)
            return
        }

        setVerificationDialogType(dialogType)
        setIsLocationVerificationOpen(true)
    }

    return (
        <Centered>
            <StyledButton
                variant={smallButton ? 'ghost_icon' : 'outlined'}
                ref={setAnchorEl}
                id="anchor-default"
                aria-haspopup="true"
                aria-expanded={isOpen}
                aria-controls="menu-default"
                onClick={() => {
                    return hasFailedTasks ? setIsOpen(!isOpen) : selectRerunOption(ReRunOptions.ReRun)
                }}
            >
                <Icon name={Icons.Add} size={24} />
                {!smallButton && TranslateText('Queue mission')}
            </StyledButton>
            <EdsProvider density="compact">
                <Menu
                    open={isOpen}
                    id="menu-default"
                    aria-labelledby="anchor-default"
                    onClose={() => setIsOpen(false)}
                    anchorEl={anchorEl}
                >
                    <Menu.Item
                        onClick={() => {
                            selectRerunOption(ReRunOptions.ReRun)
                        }}
                    >
                        {TranslateText('Rerun full mission')}
                    </Menu.Item>
                    {hasFailedTasks && (
                        <Menu.Item
                            onClick={() => {
                                selectRerunOption(ReRunOptions.ReRunFailed)
                            }}
                        >
                            {TranslateText('Rerun failed and cancelled tasks in the mission')}
                        </Menu.Item>
                    )}
                </Menu>
            </EdsProvider>
            {isLocationVerificationOpen && verificationDialogType !== null && (
                <InspectionAreaVerificationDialog
                    dialogType={verificationDialogType}
                    closeDialog={() => setIsLocationVerificationOpen(false)}
                    robot={liveRobot}
                    missionInspectionAreas={[mission.inspectionArea]}
                />
            )}
        </Centered>
    )
}