import { createPortal } from "react-dom";
import styled from "styled-components";
import BorderShadowButton from "../../../components/BorderShadowButton";
import { GoArrow } from "../../../components/Icons";
import { ImageWrapper } from "../../../components/MediaWrapper";
import getPathPrefix from "../../../utils/getPathPrefix";
import { respondTo } from "../../../utils/responsive";
import { useEffect } from "react";
function DoneModal({ isOpen, onClose, onNext, canClose }) {

    useEffect(() => {
        if (isOpen) {
            document.getElementById("frame-container").style.overflow =
                "hidden";
        } else {
            document.getElementById("frame-container").style.overflow =
                "visible";
        }

        return () => {
            document.getElementById("frame-container").style.overflow =
                "visible";
        };
    }, [isOpen]);

    if (!isOpen) return null;

    return createPortal(
        <StyledContainer>
            <ModalContent>
                {canClose && (
                    <CloseButton onClick={onClose}>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="18"
                            viewBox="0 0 16 18"
                            fill="none"
                        >
                            <path
                                d="M0.352051 3.68804C0.522717 2.87737 0.853384 2.21604 1.34405 1.70404C1.85605 1.19204 2.48538 0.936035 3.23205 0.936035C3.93605 0.936035 4.48005 1.1067 4.86405 1.44804C5.24805 1.78937 5.67472 2.26937 6.14405 2.88804L8.19205 5.57604L11.6161 0.936035C12.7894 0.936035 13.7174 1.14937 14.4001 1.57604C15.0827 1.98137 15.4241 2.53604 15.4241 3.24004C15.4241 3.51737 15.3814 3.77337 15.2961 4.00804C15.2321 4.22137 15.1254 4.44537 14.9761 4.68004C14.8267 4.9147 14.6347 5.18137 14.4001 5.48004C14.1654 5.7787 13.8881 6.1307 13.5681 6.53604L11.4561 8.90404L15.6481 14.44C15.5414 15.2507 15.2214 15.8907 14.6881 16.36C14.1547 16.8294 13.5147 17.064 12.7681 17.064C11.9574 17.0427 11.3067 16.808 10.8161 16.36C10.3467 15.912 9.88805 15.368 9.44005 14.728L7.71205 12.264L4.44805 16.968C4.34138 16.968 4.22405 16.968 4.09605 16.968C3.96805 16.9894 3.86138 17 3.77605 17C2.68805 17 1.85605 16.776 1.28005 16.328C0.725384 15.88 0.448051 15.3254 0.448051 14.664C0.448051 14.152 0.565384 13.704 0.800051 13.32C1.05605 12.9147 1.48272 12.3707 2.08005 11.688L4.64005 8.71204L0.352051 3.68804Z"
                                fill="white"
                            />
                        </svg>
                    </CloseButton>
                )}
                <ImageWrapper src="/images/game/chapter2/done.png" alt="貓爪" />
                <h1>完成準備</h1>
                <BorderShadowButton
                    text="下一步"
                    icon={<GoArrow />}
                    size="s"
                    onClick={onNext}
                />
            </ModalContent>
        </StyledContainer>,
        document.getElementById("modal-root")
    );
}

const StyledContainer = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(2px);
    z-index: 100;

    cursor: none;
`;

const ModalContent = styled.div`
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);

    width: 366px;
    height: 434px;
    background: #ffffff;
    background: url(${getPathPrefix(
            "/images/game/game-object-modal-frame.svg"
        )})
        no-repeat center center / cover;

    padding: 56px 94px 64px;
    color: var(--neutrals-700);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;

    font: var(--headline-6);

    ${respondTo.sm} {
        bottom: 44%;
        width: 267px;
        height: 394px;
        background: url(${getPathPrefix(
                "/images/game/game-object-modal-frame-m.svg"
            )})
            no-repeat center center / cover;

        background-color: white;
        border-radius: 32px;
        gap: 8px;

        padding: 72px 32px 0;
        font: var(--mobile-headline-6);

        justify-content: flex-start;

        h1 {
            margin-bottom: 12px;
        }
    }

    img {
        --size: 180px;
        width: var(--size);
        height: var(--size);
        object-fit: contain;
        border: 4px solid var(--neutrals-700);
        border-radius: 50%;

        ${respondTo.sm} {
            --size: 160px;
        }
    }

    button {
        cursor: none;
    }
`;
const CloseButton = styled.button`
    position: absolute;
    top: 0;
    right: 0;

    background: var(--main-color-e);
    border-radius: 0px 30px 0px 16px;
    display: flex;
    align-items: center;
    justify-content: center;

    --size: 64px;
    width: var(--size);
    height: var(--size);

    cursor: none;
`;

export default DoneModal;
