system-praktyk-front/src/components/acceptance-action.tsx

import React, { useState } from "react";
import {
    Button,
    ButtonGroup,
    ButtonProps,
    Dialog,
    DialogActions,
    DialogContent,
    DialogProps,
    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 AcceptSubmissionDialogProps = {
    onAccept: (comment?: string) => void;
    label: string;
} & DialogProps;

export function AcceptSubmissionDialog({ onAccept, label, ...props }: AcceptSubmissionDialogProps) {
    const { t } = useTranslation();
    const [comment, setComment] = useState<string>("");
    const classes = useVerticalSpacing(3);

    return <Dialog maxWidth="md" { ...props }>
        <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={ ev => props.onClose?.(ev, "backdropClick") }>
                    { t('cancel') }
                </Button>
                <Button onClick={ () => onAccept?.(comment) } color="primary" variant="contained">
                    { t('confirm') }
                </Button>
            </DialogActions>
        </DialogContent>
    </Dialog>
}

type DiscardSubmissionDialogProps = {
    onDiscard: (comment: string) => void;
    label: string;
} & DialogProps;

export function DiscardSubmissionDialog({ onDiscard, label, ...props }: DiscardSubmissionDialogProps) {
    const { t } = useTranslation();
    const [comment, setComment] = useState<string>("");
    const classes = useVerticalSpacing(3);

    return <Dialog maxWidth="md" { ...props }>
        <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={ ev => props.onClose?.(ev, "backdropClick") }>
                    { t('cancel') }
                </Button>
                <Button onClick={ () => onDiscard?.(comment) } color="primary" variant="contained">
                    { t('confirm') }
                </Button>
            </DialogActions>
        </DialogContent>
    </Dialog>
}

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 [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);

    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(<>
            <DiscardSubmissionDialog open={ isDiscardModalOpen } onClose={ handleDiscardModalClose } maxWidth="md" onDiscard={ onDiscard } label={ label }/>
            <AcceptSubmissionDialog open={ isAcceptModalOpen } onClose={ handleAcceptModalClose } maxWidth="md" onAccept={ onAccept } label={ label }/>
        </>, document.getElementById("modals") as Element) }
    </>
}