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

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), []);

    const {t} = useTranslation();


    return (
        <div className='share-popup-container'>
            <div className='mobile-users-part-header share-header-popup'>
                <span className='mobile-users-part-header-title'>{t('popup-control-invite-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'>{t('popup-control-code')}</span>
                <input className='share-popup-data-input share-popup-data-input code' value={data.connection_code} readOnly></input>
            </div>
            <div className='border-line'></div>
            <div className='share-popup-data-container'>
                <span className='share-popup-data-title'>{t('popup-control-link')}</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 ? t('popup-control-btn-active') : t('popup-control-btn')}</span>
                </button>
            </div>
        </div>
    )
}