
import React from 'react';
import { getUnisphereInstance } from '@unisphere/runtime-js'
import { useEffect } from 'react'
import { useState } from 'react';
import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';

export const ReactionsExperience = ({ preload }: { preload?: boolean }) => {

    const [loaded, setLoaded] = useState(false);

    const loadReactionsExperience = async () => {
        try {
            setLoaded(true);
            const workspace = await getUnisphereInstance('')
            const runtime = await workspace.loadRuntime('unisphere.widget.reactions', 'showcase', {
                autoStart: true
            });
            (runtime?.runtime as any).assignArea('reactions-experience-container');

        } catch (e) {
            console.error(e)
        }
    }

    useEffect(() => {
        if (preload) {
            loadReactionsExperience();
        }
    }, [preload])

    const playIcon = (
        <svg
            width="32"
            height="32"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            style={{
                color: 'var(--ifm-color-content-secondary)',
                opacity: 0.7
            }}
        >
            <circle cx="12" cy="12" r="10" />
            <polygon points="10,8 16,12 10,16 10,8" />
        </svg>
    );

    return (
        <PlaygroundCard
            title="Playground - Loading Experience"
            icon={!loaded ? playIcon : undefined}
        >
            <div style={{ marginBottom: '1rem' }}>
                {loaded ? (
                    <div style={{ color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem', marginBottom: '0.5rem' }}>
                        This reactions experience is {preload ? 'preloaded' : 'dynamically loaded at runtime'} with just about five lines of code.
                        <br />
                        <strong style={{ color: 'var(--ifm-color-content)' }}>Try hovering over the reactions below!</strong>
                    </div>
                ) : (
                    <div style={{ color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem' }}>
                        Lazy load the reactions experience in demo mode (backend connection disabled)
                    </div>
                )}
            </div>

            <div
                style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: '12px',
                    padding: '12px 24px',
                    backgroundColor: 'var(--ifm-background-surface-color)',
                    borderRadius: 'var(--ifm-code-border-radius)',
                    border: '1px solid var(--uc-border-color)',
                    boxShadow: 'var(--ifm-global-shadow-lw)',
                    flexWrap: 'wrap',
                    justifyContent: 'center',
                    minHeight: '48px',
                }}
            >
                <div id="reactions-experience-container"></div>
                {!loaded && (
                    <button
                        onClick={loadReactionsExperience}
                        style={{
                            padding: '8px 16px',
                            background: 'var(--ifm-color-primary)',
                            color: 'white',
                            border: 'none',
                            borderRadius: 'var(--ifm-code-border-radius)',
                            fontSize: '14px',
                            fontWeight: '500',
                            cursor: 'pointer',
                            transition: 'all 0.2s ease',
                            boxShadow: 'var(--ifm-global-shadow-lw)',
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = 'var(--ifm-color-primary-dark)';
                            e.currentTarget.style.transform = 'translateY(-1px)';
                            e.currentTarget.style.boxShadow = 'var(--ifm-global-shadow-md)';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = 'var(--ifm-color-primary)';
                            e.currentTarget.style.transform = 'translateY(0)';
                            e.currentTarget.style.boxShadow = 'var(--ifm-global-shadow-lw)';
                        }}
                    >
                        Load Reactions Experience
                    </button>
                )}
            </div>
        </PlaygroundCard>
    );
}