import React, { useState } from "react";
import { BorderLine } from "./borderLine";

type TProps = {

}

export const ShareContainer:React.FC<TProps> = React.memo((props) => {
    const [accessCode, setAccessCode] = useState<string>('123 456');
    const [accessHref, setAccessHref] = useState<string>('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
    const [isCopiedCode, setIsCopiedCode] = useState<boolean>(false);
    const [isCopiedHref, setIsCopiedHref] = useState<boolean>(false);

    function copyToClipboard(value: string, type: 'code' | 'href') {        
        navigator.clipboard.writeText(value).then(() => {
            let copiedFunc = setIsCopiedCode;
            if(type === 'href') {
                copiedFunc = setIsCopiedHref;
            } 
            copiedFunc(true)
            setTimeout(() => {
                copiedFunc(false)
            }, 2000);
        })
    }

    return <div className="share-container">
        <div className="share-container-item">
            <span className="share-container-item-title">Код подключения</span>
            <div className="share-container-item-buttons">
                <input className="share-container-item-input code" value={accessCode} readOnly></input>
                <button 
                    className={`share-container-item-copy-code-button-container ${isCopiedCode ? 'copied' : ''}`} 
                    onClick={() => copyToClipboard(accessCode, 'code')}
                >
                    <span className="share-container-item-copy-code-button-icon"></span>
                    <span className="share-container-item-copy-code-button-text">
                        {
                            isCopiedCode 
                            ? 'Скопировано'
                            : 'Скопировать'
                        }
                    </span>
                </button>
            </div>
        </div>
        <BorderLine width="80%"/>
        <div className="share-container-item">
            <span className="share-container-item-title">Ссылка для подключения</span>
            <div className="share-container-item-buttons">
                <input 
                    className="share-container-item-input href" 
                    value={accessHref}
                    readOnly
                ></input>
                <button 
                    className={`share-container-item-copy-href-button ${isCopiedHref ? 'copied' : ''}`}
                    onClick={() => copyToClipboard(accessHref, 'href')}
                ></button>
            </div>
        </div>
    </div>    
})