/********************************************************************************
 * Copyright (c) 2020 TypeFox and others
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

import { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Typography } from '@mui/material';
import { ButtonWithProgress } from '../../components/button-with-progress';
import { Extension, TargetPlatformVersion } from '../../extension-registry-types';
import { MainContext } from '../../context';
import { getTargetPlatformDisplayName } from '../../utils';

export const ExtensionRemoveDialog: FunctionComponent<ExtensionRemoveDialogProps> = props => {
    const { handleError } = useContext(MainContext);

    const abortController = useRef<AbortController>(new AbortController());
    useEffect(() => {
        return () => {
            abortController.current.abort();
        };
    }, []);

    const [dialogOpen, setDialogOpen] = useState(false);
    const [working, setWorking] = useState(false);

    const removeVersions = () => {
        return props.targetPlatformVersions.length > 1;
    };

    const handleRemoveVersions = async () => {
        try {
            setWorking(true);
            await props.onRemove(props.targetPlatformVersions);
            setDialogOpen(false);
        } catch (err) {
            handleError(err);
        } finally {
            setWorking(false);
        }
    };

    const buttonText = removeVersions() ? 'Remove Versions' : 'Remove Version';
    return <>
        <Button
            variant='contained'
            color='secondary'
            onClick={() => setDialogOpen(true)}
            disabled={props.targetPlatformVersions.length === 0} >
            {buttonText}
        </Button>
        <Dialog
            open={dialogOpen}
            onClose={() => setDialogOpen(false)} >
            <DialogTitle >
                Remove {
                    props.targetPlatformVersions.length
                } version{
                    removeVersions() ? 's' : ''
                } of {props.extension.name}?
            </DialogTitle>
            <DialogContent>
                <DialogContentText component='div'>
                    {
                        props.targetPlatformVersions
                            .map((targetPlatformVersion, key) => <Typography key={key} variant='body2'>{targetPlatformVersion.version} ({getTargetPlatformDisplayName(targetPlatformVersion.targetPlatform)})</Typography>)}
                </DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button
                    variant='contained'
                    color='primary'
                    onClick={() => setDialogOpen(false)} >
                    Cancel
                </Button>
                <ButtonWithProgress
                    sx={{ ml: 1 }}
                    autoFocus
                    working={working}
                    onClick={handleRemoveVersions} >
                    Remove
                </ButtonWithProgress>
            </DialogActions>
        </Dialog>
    </>;
};

export interface ExtensionRemoveDialogProps {
    targetPlatformVersions: TargetPlatformVersion[];
    extension: Extension;
    onRemove: (targetPlatformVersions?: TargetPlatformVersion[]) => Promise<void>;
}