import { FC, useEffect, useState } from 'react';
import { Text } from '../../../../common';
import { SanitizeHtml } from '../../../../api';
import { BaseButton } from '../../../../common/BaseButton';
import { NativeTextTree } from '../../../../common/native-text/NativeTextTree';

interface WiredPlaceholderPreviewProps {
    previewHtml: string;
    previewToken: string;
}

const copyToClipboard = async (value: string) => {
    if (!value) return false;

    try {
        if (navigator?.clipboard?.writeText) {
            await navigator.clipboard.writeText(value);

            return true;
        }
    } catch {}

    try {
        const textArea = document.createElement('textarea');

        textArea.value = value;
        textArea.setAttribute('readonly', '');
        textArea.style.position = 'fixed';
        textArea.style.opacity = '0';

        document.body.appendChild(textArea);
        textArea.select();

        const copied = document.execCommand('copy');

        document.body.removeChild(textArea);

        return copied;
    } catch {
        return false;
    }
};

export const WiredPlaceholderPreview: FC<WiredPlaceholderPreviewProps> = (props) => {
    const { previewHtml, previewToken } = props;
    const [copied, setCopied] = useState(false);

    useEffect(() => {
        if (!copied) return;

        const timeout = window.setTimeout(() => setCopied(false), 1200);

        return () => window.clearTimeout(timeout);
    }, [copied]);

    const handleCopy = async () => {
        const didCopy = await copyToClipboard(previewToken);

        setCopied(didCopy);
    };

    return (
        <NativeTextTree>
            <BaseButton type="button" className={`octane-wired__placeholder-preview ${copied ? 'is-copied' : ''}`} onClick={handleCopy}>
                <Text dangerouslySetInnerHTML={{ __html: SanitizeHtml(previewHtml) }} />
            </BaseButton>
        </NativeTextTree>
    );
};