import * as React from 'react';
import { observer } from 'mobx-react';
import './TaskCompletedBox.scss';
import { observable, action } from 'mobx';
import { Fade } from '@mui/material';

@observer
export class TaskCompletionBox extends React.Component<{}> {
    @observable public static taskCompleted: boolean = false;
    @observable public static popupX: number = 500;
    @observable public static popupY: number = 150;
    @observable public static textDisplayed: string;

    @action
    public static toggleTaskCompleted = () => {
        TaskCompletionBox.taskCompleted = !TaskCompletionBox.taskCompleted;
    };

    render() {
        return (
            <Fade in={TaskCompletionBox.taskCompleted}>
                <div
                    className="taskCompletedBox-fade"
                    style={{
                        left: TaskCompletionBox.popupX ? TaskCompletionBox.popupX : 500,
                        top: TaskCompletionBox.popupY ? TaskCompletionBox.popupY : 150,
                    }}>
                    {TaskCompletionBox.textDisplayed}
                </div>
            </Fade>
        );
    }
}