import React, { useState } from "react";
import { BorderLine } from "../mobileAddPart/borderLine";
import { MobileAddPartHeader } from "../mobileAddPart/mobileAddPartHeader";
import './sharePopup.css';

type TProps = {
    acceessCode: string
    href: string
    onClickClose: () => void
}

export const SharePopup:React.FC<TProps> = React.memo((props) => {
    const [isCopied, setIsCopied] = useState<boolean>(false);

    function copyHref() {
        navigator.clipboard.writeText(props.href).then(() => {            
            setIsCopied(true)
            setTimeout(() => {
                setIsCopied(false)
            }, 2000);
        })
    }

    return <div className="share-popup-container">
        <MobileAddPartHeader        
            onClick={props.onClickClose}
            title='Пригласить на демонстрацию'
            paddingBottom="0px"
        />
        <div className="share-popup-data-container">
            <span className="share-popup-data-title">Код подключения</span>
            <input className="share-popup-data-input code" value={props.acceessCode} readOnly></input>
        </div>
        <BorderLine width="80%" />
        <div className="share-popup-data-container">
            <span className="share-popup-data-title">Ссылка для подключения</span>
            <input className="share-popup-data-input href" value={props.href} readOnly></input>
            <button className={`share-popup-copy-button ${isCopied ? 'copied' : ''}`} onClick={() => copyHref()}>
                <span className="share-popup-copy-button-icon"></span>
                <span className="share-popup-copy-button-title">
                    {
                        isCopied
                        ? 'Скопировано'
                        : 'Скопировать'
                    }
                </span>
            </button>
        </div>        
    </div>
})