import styled from 'styled-components';
import { createPortal } from 'react-dom';
import { useState, useEffect, useRef } from 'react';
import html2canvas from "html2canvas";
import { ImageWrapper } from '../../../components/MediaWrapper';


function LoadResultImg({ onDone }) {
    const [isLoaded, setIsLoaded] = useState(false);
    const imgRef = useRef(null);
    const [result, setResult] = useState(null);


    useEffect(() => {
        const result = localStorage.getItem("RESULT");
        setResult(JSON.parse(result));

        setIsLoaded(true);

    }, []);

    useEffect(() => {
        if (isLoaded && result?.level) {
            startGenerateImg();
        }
    }, [isLoaded, result]);

    const startGenerateImg = () => {
        if (!imgRef.current) {
            return;
        }
        setTimeout(() => {
            html2canvas(imgRef.current, {
                allowTaint: true,
                useCORS: true,
                scale: 2, // 將解析度提高2倍
                // set imgRef opacity to 1
                onclone: (doc) => {
                    const el = doc.getElementById('result-img');
                    el.style.opacity = 1;
                }
            }).then(canvas => {
                const imgSrc = canvas.toDataURL('image/png');
                onDone?.(imgSrc);
            });
        }, 1000);
    }

    if (!isLoaded || !result?.level) {
        return null;
    }

    return createPortal(
        <StyledContainer ref={imgRef} id="result-img">
            <ImageWrapper
                className="bg"
                src="/images/game/shares/data-share-bg.jpg"
                alt="data-share-bg"
            />
            <ImageWrapper
                className="kv"
                src={`/images/game/shares/share-kv-${result.level.level}.png`}
                alt="data-share-kv"
            />
            <TextContent>
                <ImageWrapper
                    className="title"
                    src={result.level.title}
                    alt="title-level=1"
                />
                <p>
                    根據真實統計，你的準備指數為 <b>{result.rank}</b> 分。
                    <br />比
                    <b>
                        {result.pr > 60
                            ? result.pr
                            : 100 - result.pr}
                        ％
                    </b>{" "}
                    的玩家還{result.pr > 60 ? "高" : "低"}。
                </p>
            </TextContent>
            <ScoreDescription>{result.level.description}</ScoreDescription>
        </StyledContainer>,
        document.getElementById("result-img-root")
    );
}

const StyledContainer = styled.div`
    position: fixed;
    left: 100px;
    top: 100px;

    z-index: 50;

    width: 375px;
    height: 666px;
    color: var(--neutrals-700);

    opacity: 0;
    pointer-events: none;

    button {
        position: absolute;
        right: 16px;
        top: 16px;
        z-index: 100;
    }

    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .kv {
        position: absolute;
        left: 50%;
        top: 24px;
        transform: translateX(-50%);

        width: 327px;
        height: 500px;
    }
`;

const TextContent = styled.div`
    position: absolute;
    left: 50%;
    top: 375px;
    transform: translateX(-50%);

    width: 280px;

    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
        height: 60px;
        width: auto;
        object-fit: cover;
    }

    p {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 16.8px */
        text-align: center;
        margin-top: 2px;

        b {
            font-family: 'Bungee';
            font-size: 16px;
        }
    }
`;

const ScoreDescription = styled.div`
    position: absolute;
    left: 50%;
    bottom: 71px;
    transform: translateX(-50%);

    width: 295px;
    text-align: center;
    font: var(--small-text-1);
    font-weight: 700;
`;

export default LoadResultImg;
