import React, { useState } from "react";
import { Button, ButtonGroup, Dialog, DialogActions, DialogContent, DialogTitle, Menu, MenuItem, TextField, Typography } from "@material-ui/core";
import { MenuDown, StickerCheckOutline, StickerRemoveOutline } from "mdi-material-ui";
import { useTranslation } from "react-i18next";
import { useVerticalSpacing } from "@/styles";
import { createPortal } from "react-dom";

type AcceptanceActionsProps = {
    onAccept: (comment?: string) => void;
    onDiscard: (comment: string) => void;
    label: string;
}

export function AcceptanceActions({ onAccept, onDiscard, label }: AcceptanceActionsProps) {
    const { t } = useTranslation();

    const [isDiscardModalOpen, setDiscardModelOpen] = useState<boolean>(false);
    const [isAcceptModalOpen, setAcceptModelOpen] = useState<boolean>(false);

    const [comment, setComment] = useState<string>("");
    const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);

    const classes = useVerticalSpacing(3);

    const handleAccept = () => {
        onAccept(comment);
    }

    const handleDiscard = () => {
        onDiscard(comment);
    }

    const handleAcceptModalClose = () => {
        setAcceptModelOpen(false);
    }

    const handleDiscardModalClose = () => {
        setDiscardModelOpen(false);
    }

    const handleDiscardAction = () => {
        setDiscardModelOpen(true);
    }

    const handleAcceptMenuOpen = (ev: React.MouseEvent<HTMLElement>) => {
        setMenuAnchor(ev.currentTarget);
    }

    const handleAcceptMenuClose = () => {
        setMenuAnchor(null);
    }

    const handleAcceptWithComment = () => {
        setAcceptModelOpen(true);
        setMenuAnchor(null);
    }

    const handleAcceptWithoutComment = () => {
        onAccept();
    }

    return <>
        <ButtonGroup color="primary" variant="contained">
            <Button onClick={ handleAcceptWithoutComment } startIcon={ <StickerCheckOutline /> }>
                { t('accept-without-comments') }
            </Button>
            <Button size="small" onClick={ handleAcceptMenuOpen }><MenuDown /></Button>
        </ButtonGroup>

        <Menu open={ !!menuAnchor } anchorEl={ menuAnchor } onClose={ handleAcceptMenuClose }>
            <MenuItem onClick={ handleAcceptWithoutComment }>{ t("accept-without-comments") }</MenuItem>
            <MenuItem onClick={ handleAcceptWithComment }>{ t("accept-with-comments") }</MenuItem>
        </Menu>

        <Button onClick={ handleDiscardAction } color="secondary" startIcon={ <StickerRemoveOutline /> }>
            { t('discard') }
        </Button>

        { createPortal(<>
            <Dialog open={ isDiscardModalOpen } onClose={ handleDiscardModalClose } maxWidth="md">
                <DialogTitle>{ t(label + ".discard.title") }</DialogTitle>
                <DialogContent className={ classes.root }>
                    <Typography variant="body1">{ t(label + ".discard.info") }</Typography>
                    <TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") } rows={3}/>

                    <DialogActions>
                        <Button onClick={ handleDiscardModalClose }>
                            { t('cancel') }
                        </Button>
                        <Button onClick={ handleDiscard } color="primary" variant="contained">
                            { t('confirm') }
                        </Button>
                    </DialogActions>
                </DialogContent>
            </Dialog>

            <Dialog open={ isAcceptModalOpen } onClose={ handleAcceptModalClose } maxWidth="md">
                <DialogTitle>{ t(label + ".accept.title") }</DialogTitle>
                <DialogContent className={ classes.root }>
                    <Typography variant="body1">{ t(label + ".accept.info") }</Typography>
                    <TextField multiline value={ comment } onChange={ ev => setComment(ev.target.value) } fullWidth label={ t("comments") } rows={3}/>

                    <DialogActions>
                        <Button onClick={ handleAcceptModalClose }>
                            { t('cancel') }
                        </Button>
                        <Button onClick={ handleAccept } color="primary" variant="contained">
                            { t('confirm') }
                        </Button>
                    </DialogActions>
                </DialogContent>
            </Dialog>
        </>, document.getElementById("modals") as Element) }
    </>
}