import React, { useEffect, useRef, useState } from "react";
import './mainPart.css';
import { PinkButton } from "./button";
import { MainPartHeader } from "./mainPartHeader";
import { ContentContainer } from "./contentContainer";
import { MainPartFooter } from "./main-part-footer";
import { OrLineContainer } from "./orLineContainer";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import Calendar from "react-calendar";
import { CalendarComponent } from "./calendar/calendar";
import { PlanContentContainer } from "./planContentContainer";


export const MainPart: React.FC = React.memo(() => {
    const changeContent = useRef(0);
    const [showBackground, setShowBackground] = useState<boolean>(false);
    const [planContent, setPlaneContent] = useState<JSX.Element>();
    const [currentContent, setCurrentContent] = useState<JSX.Element>(
        <ContentContainer 
            titleText="Удаленная демонстрация жилого комплекса"
            descriptText="Основанная на стриминге технология удаленной демонстрации позволяет познакомиться с жилым комплексом, не посещая офис продаж."
            onClickButton={() => onClickStartDemo()}
            textButton='Начать демонстрацию'
        />
    );

    useEffect(() => {
        // changeContent.current += 1;
    }, [currentContent])

    function onClickStartDemo() {
        setCurrentContent(
            <>
                <ContentContainer 
                    titleText="Запустите демонстрацию"
                    descriptText="Начните новую демонстрацию жилого комплекса"
                    onClickButton={() => onClickCreateNewDemo()}
                    textButton='Начать новую демонстрацию'
                    />
                <OrLineContainer />
                <ContentContainer 
                    descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
                    onClickButton={() => onClickPlaneDemo()}
                    textButton='Запланировать демонстрацию'
                    />
            </>
        )        
    } 

    function onClickCreateNewDemo() {        
        setCurrentContent(
            <ContentContainer 
                titleText="Демонстрация запущена"
                descriptText="Код для подключения к демонстрации:"
                onClickButton={() => onClickConnect()}
                textButton='Подключиться'
                accessCode="1876"
            />
        )            
    }

    function onClickPlaneDemo() {
        enableBackground();
        setPlaneContent(
            <PlanContentContainer 
                title="Выбор даты"
                content={<CalendarComponent />}
            />
        );
        setCurrentContent(<></>);
    }

    function onClickConnect() {

    }

    function enableBackground() {
        setShowBackground(true);
    }

    function disableBackground() {
        setShowBackground(false);
    }

    return <div className="main-part-container">
        <div className="background-image"></div>
        <MainPartHeader />
        <TransitionGroup>
            <CSSTransition
                key={changeContent.current}
                timeout={300}
                classNames={'change-main-part-content'}
            >
                <div className="main-part-content">            
                    {currentContent}                
                </div>
            </CSSTransition>            
        </TransitionGroup>
        {
            planContent ?
            <div className="main-part-plan-content">
                {planContent}
            </div>
            : null
        }        
        <CSSTransition
            in={showBackground}
            timeout={300}
            classNames='show-background'
            unmountOnExit            
        >
            <div className="background-container"></div>
        </CSSTransition>
        <MainPartFooter />
    </div>
})