import './sharePopup.css'
import { useState, useEffect } from 'react'
import { TSidebarPopup } from '../../utils/types'

export const PopupShare: React.FC<any> = ({ setClose, data }) => {
    const [copy, setCopy] = useState(false)

    console.log(data)

    function copyLink() {
        navigator.clipboard.writeText(window.location.href)
        setCopy(prev => !prev)
    }

    function closePopup() {
        setClose()
        setCopy(false)
    }

    useEffect(() => () => setCopy(false), []);


    return (
        <div className='share-popup-container'>
            <div className='mobile-users-part-header share-header-popup'>
                <span className='mobile-users-part-header-title'>Пригласить на демонстрацию</span>
                <button onClick={closePopup} className='mobile-users-part-header-close-button'></button>
            </div>
            <div className='share-popup-data-container'>
                <span className='share-popup-data-title'>Код подключения</span>
                <input className='share-popup-data-input share-popup-data-input code' value={data.code} readOnly></input>
            </div>
            <div className='border-line'></div>
            <div className='share-popup-data-container'>
                <span className='share-popup-data-title'>Ссылка для подключения</span>
                <input className='share-popup-data-input href' value={window.location.href} readOnly></input>
            </div>
            <div className='share-popup-data-container'>
                <button className='share-popup-copy-button '>
                    <span className='share-popup-copy-button-icon'></span>
                    <span onClick={copyLink} className='share-popup-copy-button-title'>{copy ? 'Скопировано' : 'Скопировать'}</span>
                </button>
            </div>
        </div>
    )
}