system-praktyk-front/src/pages/internship/proposal.tsx

import { Page } from "@/pages/base";
import {
    Button,
    ButtonGroup,
    Container,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    Link,
    Menu,
    MenuItem,
    TextField,
    Typography
} from "@material-ui/core";
import { Link as RouterLink, useHistory } from "react-router-dom";
import { route } from "@/routing";
import { InternshipForm } from "@/forms/internship";
import React, { useState } from "react";
import { ProposalComment } from "@/pages/steps/proposal";
import { useTranslation } from "react-i18next";
import { ProposalPreview } from "@/components/proposalPreview";
import { useSelector } from "react-redux";
import { Internship } from "@/data";
import { AppState } from "@/state/reducer";
import { internshipSerializationTransformer } from "@/serialization";
import { Actions } from "@/components";
import { InternshipProposalActions, useDispatch } from "@/state/actions";
import { MenuDown, StickerCheckOutline, StickerRemoveOutline } from "mdi-material-ui/index";
import { useVerticalSpacing } from "@/styles";

export const InternshipProposalFormPage = () => {
    const { t } = useTranslation();

    return <Page title={ t("pages.proposal-form.header") }>
        <Page.Header maxWidth="md">
            <Page.Breadcrumbs>
                <Link component={ RouterLink } to={ route("home") }>{ t("pages.my-internship.header") }</Link>
                <Typography color="textPrimary">{ t("pages.proposal-form.header") }</Typography>
            </Page.Breadcrumbs>
            <Page.Title>{ t("pages.proposal-form.header") }</Page.Title>
        </Page.Header>
        <Container maxWidth={ "md" }>
            <ProposalComment />
            <InternshipForm/>
        </Container>
    </Page>
}

export const InternshipProposalPreviewPage = () => {
    const { t } = useTranslation();
    const proposal = useSelector<AppState, Internship | null>(state => state.proposal.proposal && internshipSerializationTransformer.reverseTransform(state.proposal.proposal));

    const dispatch = useDispatch();
    const history = useHistory();

    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 handleAccept = () => {
        dispatch({ type: InternshipProposalActions.Approve, comment });
        history.push(route("home"));
    }

    const handleDiscard = () => {
        dispatch({ type: InternshipProposalActions.Decline, comment });
        history.push(route("home"));
    }

    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 = () => {
        dispatch({ type: InternshipProposalActions.Approve, comment: null });
        history.push(route("home"));
    }

    const classes = useVerticalSpacing(3);

    return <Page title={ t("") }>
        <Page.Header maxWidth="md">
            <Page.Breadcrumbs>
                <Link component={ RouterLink } to={ route("home") }>Moja praktyka</Link>
                <Typography color="textPrimary">Podgląd zgłoszenia</Typography>
            </Page.Breadcrumbs>
            <Page.Title>Moje zgłoszenie</Page.Title>
        </Page.Header>
        <Container maxWidth={ "md" } className={ classes.root }>
            <ProposalComment />
            { proposal && <ProposalPreview proposal={ proposal } /> }

            <Actions>
                <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>

                <Button component={ RouterLink } to={ route("home") }>
                    { t('go-back') }
                </Button>
            </Actions>
        </Container>
        <Dialog open={ isDiscardModalOpen } onClose={ handleDiscardModalClose } maxWidth="md">
            <DialogTitle>{ t("internship.discard.title") }</DialogTitle>
            <DialogContent className={ classes.root }>
                <Typography variant="body1">{ t("internship.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("internship.accept.title") }</DialogTitle>
            <DialogContent className={ classes.root }>
                <Typography variant="body1">{ t("internship.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>
    </Page>
}

export default InternshipProposalFormPage;