import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import './mainScreen.css';
import { Toolbar } from "./toolbar/toolbar";

export const MainScreen:React.FC = React.memo(() => {
    const [showToolbar, setShowToolbar] = useState<boolean>(false);

    function onClickToolbar() {
        setShowToolbar(!showToolbar);
    }

    return <div className="main-screen-container">
        <div className="main-screen-model"></div>
        <CSSTransition
            in={showToolbar}
            timeout={300}
            classNames='show-toolbar'
        >
            <Toolbar
                onClickOpenButton={onClickToolbar}
                isOpen={showToolbar}
            />
        </CSSTransition>
    </div>
})