import React, { useContext, useEffect, useRef, useState } from "react";
import './mainPart.css';
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 { CalendarComponent } from "./calendar/calendar";
import { PlanContentContainer } from "./planContentContainer";
import { TimeSelector } from "./timeSelector/timeSelector";
import { Form } from "./form/form";
import { LangDict } from "../langDict";
import { ContextLang } from "../ContextLang";

type FormData = {
    phone: string
    email: string
    firstName: string
}

export const MainPart: React.FC = React.memo(() => {
    // const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
    const {lang, setLang} = useContext(ContextLang);
    const [changeContent, setChangeContent] = useState(0);
    const [showBackground, setShowBackground] = useState<boolean>(false);
    const [planContent, setPlaneContent] = useState<JSX.Element>();
    const defaultCurrentContent = 
        <ContentContainer 
            titleText={LangDict.mainTitle}
            descriptText={LangDict.mainDescription}
            onClickButton={() => onClickStartDemo()}
            textButton={LangDict.startDemoButton}
        />
    const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);  
    const lastRender = currentContent;

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

    useEffect(() => {
        console.log(lang)
        // onClickStartDemo()
        setCurrentContent(lastRender)
        
    }, [lang])

    function changeLang(lang: 'ru' | 'en') {
        setLang(lang);
        document.querySelector('html').lang = lang;
    }

    function onClickStartDemo() {
        console.log(lang)
        setCurrentContent(
            <>
                <ContentContainer 
                    titleText={LangDict.startDemoTitle}
                    descriptText={LangDict.startDemoDescriptionStart}
                    onClickButton={() => onClickCreateNewDemo()}
                    textButton={LangDict.startNewDemoButton}
                    />
                <OrLineContainer text={LangDict.orLine}/>
                <ContentContainer 
                    descriptText={LangDict.startDemoDescriptionEnroll}
                    onClickButton={() => onClickPlaneDemo()}
                    textButton={LangDict.enrollNewDemoButton}
                />
            </>
        )        
    } 

    function onClickCreateNewDemo() {
        console.log(lang)
        setCurrentContent(
            <ContentContainer 
                // titleText="Демонстрация запущена"
                titleText={LangDict.demoStartedTitle}
                descriptText={LangDict.demoStartedDescription}
                onClickButton={() => onClickConnect()}
                textButton={LangDict.connectToDemoButton}
                accessCode="1876"
            />
        )            
    }

    function onClickPlaneDemo() {
        enableBackground();
        setPlaneContent(
            <PlanContentContainer 
                title={LangDict.selectDate}
                content={<CalendarComponent onCLick={(date) => onSelectDay(date)} />}
                isLegend={true}
            />
        );
        setCurrentContent(<></>);
    }

    function onClickConnect() {

    }

    function onSelectDay(date: {ru: string, en: string}) {
        setPlaneContent(
            <PlanContentContainer 
            title={LangDict.selectTime}
                date={date}
                content={<TimeSelector 
                    date={date}
                    onClickTime={(date, time) => onSelectTime(date, time)}                
                />}
                isLegend={true}
            />
        );
    }

    function onSelectTime(date: {ru: string, en: string}, time: string) {
        let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`;
        let dateObj = {
            ru: `${date.ru} в ${time}`,
            en: `${date.en} in ${time}`
        }
        setPlaneContent(
            <PlanContentContainer
                title={LangDict.checkout}
                date={dateObj}
                content={
                    <Form 
                        onSubmit={(data, date) => onSubmit(data, date)} 
                        dateInfo={dateTime}
                    />
                }
                isLegend={false}
            />
        )
        console.log(dateTime)
    }

    function onSubmit(data: FormData, date: string) {
        setPlaneContent(null);
        setCurrentContent(
            <ContentContainer 
                titleText={LangDict.checkouted}
                descriptText={LangDict.checkoutedDescription}
                textButton={LangDict.toHomeButton}
                onClickButton={() => toMain()}
            />
        )
        // console.log(data, date)
    }

    function toMain() {
        setCurrentContent(defaultCurrentContent);
        setPlaneContent(null);
        disableBackground();
    }

    function enableBackground() {
        setShowBackground(true);
    }

    function disableBackground() {
        setShowBackground(false);
    }

    return <div className="main-part-container">
        <div className="background-image"></div>
        <MainPartHeader changeLang={(lang) => changeLang(lang)} onClickLogo={toMain}/>
        <TransitionGroup>
            <CSSTransition
                key={changeContent}
                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>
})