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

export const MainScreen:React.FC = React.memo(() => {
    const [showToolbar, setShowToolbar] = useState<boolean>(false);
    const [showMobileUsersPart, setShowMobileUsersPart] = useState<boolean>(false);
    const [showMobileOtherPart, setShowMobileOtherPart] = useState<boolean>(false);
    const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState<boolean>(false);
    const [showMobileSharePart, setShowMobileSharePart] = useState<boolean>(false);
    const showPartsStates = [
        setShowMobileUsersPart,
        setShowMobileOtherPart,
        setShowMobileLangSelectorPart,
        setShowMobileSharePart
    ]
    const windowHeight = useContext(ContextWindowHeight);

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

    function openMobileUsers() {
        closeOthersParts(setShowMobileUsersPart);

        setShowMobileUsersPart(true);
    }

    function closeMobileUsers() {
        setShowMobileUsersPart(false);
    }

    function openMobileOther() {
        closeOthersParts(setShowMobileOtherPart);

        setShowMobileOtherPart(true);
    }

    function closeMobileOther() {
        setShowMobileOtherPart(false);
    }

    function openLangSelector() {
        closeOthersParts(setShowMobileLangSelectorPart)
        setShowMobileLangSelectorPart(true);
    }

    function closeLangSelector() {
        setShowMobileLangSelectorPart(false);
    }

    function openSharePart() {
        closeOthersParts(setShowMobileSharePart);
        setShowMobileSharePart(true);
    }

    function closeSharePart() {
        setShowMobileSharePart(false);
    }

    function closeOthersParts(currentPart: React.Dispatch<React.SetStateAction<boolean>>) {
        showPartsStates.forEach(e => {
            if(currentPart !== e) {
                e(false);
            }
        });
    }

    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}
                onClickMobileUsers={openMobileUsers}
                isOpenUsersMobilePart={showMobileUsersPart}
                onClickMobileOther={openMobileOther}
                isOpenOtherMobilePart={showMobileOtherPart}
            />
        </CSSTransition>
        {
            windowHeight < 700?
            <>
                <CSSTransition
                    in={showMobileUsersPart}
                    timeout={300}
                    classNames='show-mobile-users'
                    unmountOnExit
                >
                    <MobileAddPart 
                        onClickClose={closeMobileUsers}
                        title='Участники демонстрации'
                        type="users"
                    />
                </CSSTransition>
                <CSSTransition
                    in={showMobileOtherPart}
                    timeout={300}
                    classNames='show-mobile-users'
                    unmountOnExit
                >
                    <MobileAddPart 
                        onClickClose={closeMobileOther}
                        onClickChangeLang={openLangSelector}
                        onClickShare={openSharePart}
                        title='Дополнительно'
                        type="other"
                    />
                </CSSTransition>
                <CSSTransition
                    in={showMobileLangSelectorPart}
                    timeout={300}
                    classNames='show-mobile-users'
                    unmountOnExit
                >
                    <MobileAddPart 
                        onClickClose={closeLangSelector}
                        title='Выбор языка'
                        type="selectLang"
                        isContainBack={true}
                        onClickBackButton={openMobileOther}
                    />
                </CSSTransition>
                <CSSTransition
                    in={showMobileSharePart}
                    timeout={300}
                    classNames='show-mobile-users'
                    unmountOnExit
                >
                    <MobileAddPart 
                        onClickClose={closeSharePart}
                        title='Пригласить на демонстрацию'
                        type="share"
                        isContainBack={true}
                        onClickBackButton={openMobileOther}
                    />
                </CSSTransition>
            </>
            : null
        }
    </div>
})