import React, { useContext, useEffect, useState } from "react";
import { ContextWs } from "../../ContextWs";
import { ContextLang } from "../ContextLang";
import { PinkButton } from "./pinkButton";

type TProps = {
    textButton: {
        ru: string,
        en: string
    }
    onClickButton: () => void
    titleText?: {
        ru: string,
        en: string
    }
    descriptText: {
        ru: string,
        en: string
    }
    accessCode?: string,
}

type WsData = {
    message: string
    id: string
    content?: boolean
    port?: string
  }

export const ContentContainer:React.FC<TProps> = React.memo((props) => {
    const [accessCode, setAccessCode] = useState('------');
    let {lang} = useContext(ContextLang);
    const {wsEvent} = useContext(ContextWs);

    useEffect(() => {
        if(!wsEvent) {
            return;
        }        
        let data: WsData;
        try {
            data = JSON.parse(wsEvent.data) as WsData;
        } catch {
            return;
        }
        // console.log(data)
        if(data?.message === 'SESS_CREATION') {
            setAccessCode(data.id)
        }
    }, [wsEvent])
    
    return <div className="main-part-text-container">
        {
            props.titleText && 
            <span className="main-part-text-title">
                {props.titleText[lang]}
            </span>
        }        
        <span className="main-part-text-descript">
            {props.descriptText[lang]}
        </span>
        {
            props.accessCode &&
            <span className="main-part-text-access-code">{accessCode}</span>
        }
        <PinkButton
            onClick={props.onClickButton}
            textButton={props.textButton[lang]}
        />
    </div>
})