import React, { useEffect, 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";

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

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

    useEffect(() => {
        // setChangeContent(changeContent + 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 onCLick={(date) => onSelectDay(date)} />}
                isLegend={true}
            />
        );
        setCurrentContent(<></>);
    }

    function onClickConnect() {

    }

    function onSelectDay(date: string) {
        setPlaneContent(
            <PlanContentContainer 
                title="Выбор времени"
                date={date}
                content={<TimeSelector 
                    date={date}
                    onClickTime={(date, time) => onSelectTime(date, time)}                
                />}
                isLegend={true}
            />
        );
    }

    function onSelectTime(date: string, time: string) {
        let dateTime = `${date} в ${time}`;
        setPlaneContent(
            <PlanContentContainer
                title="Оформление"
                date={dateTime}
                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="Просмотр запланирован"
                descriptText="Дополнительная информация будет отправлена на указанный почтовый адрес или номер телефона."
                textButton="На главную"
                onClickButton={() => toMain()}
            />
        )
        // console.log(data, date)
    }

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

    function enableBackground() {
        setShowBackground(true);
    }

    function disableBackground() {
        setShowBackground(false);
    }

    return <div className="main-part-container">
        <div className="background-image"></div>
        <MainPartHeader />
        <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>
})