/**
 * @file Comment.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import {Grid, IconButton, Paper, TextField, Tooltip, Typography} from "@mui/material";
import EditIcon from '@mui/icons-material/Edit';
import SaveIcon from '@mui/icons-material/Save';
import React, {useState} from "react";
import {axiosPatch, axiosRemove} from "../../services/AxiosService";
import {useAuth} from "../../services/AuthMiddleware";
import {isAdmin} from "../../util/AuthInfo";
import DeleteIcon from "@mui/icons-material/Delete";
import DialogYesNo from "../common/DialogYesNo";

function Comment(props) {
    const comment = props.comment;
    const onRemove = props.onRemove;
    const [isEditing, setEditing] = React.useState(false);
    const [editedText, setEditedText] = React.useState(comment.text);
    const [dialogOpen, setDialogOpen] = useState(false);
    const auth = useAuth();

    const buttonClicked = async () => {
        if (isEditing) {
            comment.text = editedText;
            const res = await axiosPatch("/comments", {id: comment.id, text: editedText}, {});
        }
        setEditing(!isEditing);
    }

    const removeComment = async () => {
        if (comment?.id !== undefined && comment?.id !== null ) {
            const res = await axiosRemove("/comments/" + comment.id);
            onRemove(comment.id);
        }
        setDialogOpen(false);
    }

    return (<>
        {!!comment ?
            <Paper variant="outlined" sx={{
                padding: 1,
                ...( isAdmin(comment?.owner) && {borderColor: "red"}),
                ...( auth?.user.id === comment?.owner?.id && {borderColor: "green"})
            }}>
                <Grid container columns={{xs: 3}}>
                    <Grid item xs={2}>
                        <Typography display="inline" sx={{fontWeight: "bold"}}>{comment?.owner?.name}</Typography>
                        <Typography display="inline" color="text.secondary" sx={{paddingLeft: 1}}>
                            { new Date(comment.createdAt).toLocaleString() }
                        </Typography>
                    </Grid>

                    <Grid item xs={1} sx={{textAlign: "right"}}>
                        {(auth?.user.id === comment?.owner?.id || isAdmin(auth?.user)) &&
                            <Tooltip title={isEditing ? "Uložit" : "Editovat"} followCursor>
                                <IconButton onClick={buttonClicked} size={"small"} disabled={isEditing && editedText?.length === 0}>
                                    {isEditing ? <SaveIcon fontSize={"inherit"}/> : <EditIcon fontSize={"inherit"}/>}
                                </IconButton>
                            </Tooltip>
                        }
                        { isAdmin(auth?.user) &&
                            <Tooltip title={"Smazat"} followCursor>
                                <IconButton onClick={() => setDialogOpen(true)} size={"small"}>
                                    <DeleteIcon fontSize={"inherit"}/>
                                </IconButton>
                            </Tooltip>
                        }
                    </Grid>
                </Grid>

                {isEditing ?
                    <TextField multiline maxRows={15} fullWidth
                               defaultValue={editedText}
                               onChange={(e) => setEditedText(e.target.value)}
                    />
                    :
                    <Typography sx={{whiteSpace: 'pre-line', overflowWrap: 'anywhere'}}>
                        {editedText}
                    </Typography>
                }

            </Paper>
            :
            <div/> }

        <DialogYesNo fceYes={removeComment}
                     fceNo={() => setDialogOpen(false)}
                     title={"Smazat komentář?"}
                     description={"Potvrdit smazání komentáře"}
                     isOpen={dialogOpen}
        />

    </>);
}


export default Comment;
