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

export const MainScreen:React.FC = React.memo(() => {
    const [showToolbar, setShowToolbar] = useState<boolean>(true);
    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 [showSharePopup, setShowSharePopup] = useState<boolean>(false);
    const [showPushMessage, setShowPushMessage] = 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);
            }
        });
    }

    function openSharePopup() {
        setShowSharePopup(true);
    }

    function closeSharePopup() {
        setShowSharePopup(false);
    }

    function onShowPushMessage() {
        setShowPushMessage(true);
        setTimeout(() => {
            hidePushMessage()
        }, 2000);
    }

    function hidePushMessage() {
        setShowPushMessage(false);
    }

    useEffect(() => {
        setTimeout(() => {
            onShowPushMessage()
        }, 1000);
    }, [])

    return <div className="main-screen-container">
        <div className="main-screen-model"></div>
        <CSSTransition
            in={showPushMessage}
            timeout={300}
            classNames='show-push-message'
            unmountOnExit
        >
            <PushMessage 
                textMessage="Управление презентацией получено"
                typeMessage="controlOn"
            />
        </CSSTransition>
        <CSSTransition
            in={showToolbar}
            timeout={300}
            classNames='show-toolbar'
        >
            <Toolbar
                onClickOpenButton={onClickToolbar}
                isOpen={showToolbar}
                onClickMobileUsers={openMobileUsers}
                isOpenUsersMobilePart={showMobileUsersPart}
                onClickMobileOther={openMobileOther}
                isOpenOtherMobilePart={showMobileOtherPart}
                onClickShareButton={openSharePopup}
            />
        </CSSTransition>
        <CSSTransition
            in={showSharePopup}
            timeout={300}
            classNames='show-share-popup'
            unmountOnExit
        >
            <SharePopup 
                acceessCode="123 456"
                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                onClickClose={closeSharePopup}
            />
        </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>
})