import React, { useState } from "react";
import './mainPart.css';
import { PinkButton } from "./button";
import { MainPartHeader } from "./mainPartHeader";
import { ContentContainer } from "./contentContainer";
import { MainPartFooter } from "./main-part-footer";

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

    function onClickStartDemo() {
        setCurrentContent(<>
            <ContentContainer 
                titleText="Запустите демонстрацию"
                descriptText="Начните новую демонстрацию жилого комплекса"
                onClickButton={() => onClickCreateNewDemo()}
                textButton='Начать новую демонстрацию'
            />
            <div className="main-part-content-or-line-container">
                <span className="main-part-content-or-line"></span>
                <span className="main-part-content-or-line-text">или</span>
                <span className="main-part-content-or-line"></span>
            </div>
            
            <ContentContainer 
                descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
                onClickButton={() => onClickPlaneDemo()}
                textButton='Запланировать демонстрацию'
            />
            </>
            
        )
    }

    function onClickCreateNewDemo() {

    }

    function onClickPlaneDemo() {

    }

    function onClickConnect() {

    }

    return <div className="main-part-container">
        <div className="background-image"></div>
        <MainPartHeader />
        <div className="main-part-content">
            {currentContent}
        </div>
        <MainPartFooter />
    </div>
})