import styled, { keyframes } from 'styled-components';
import { useImperativeHandle, forwardRef } from 'react';
import { ImageWrapper } from '../../components/MediaWrapper';
import getPathPrefix from '../../utils/getPathPrefix';
import { respondTo } from '../../utils/responsive';

function TransitionMask({ endingView }, ref) {
    useImperativeHandle(ref, () => ({
        play() {
            showMask().then(showFinalText);
        }
    }));


    async function showMask() {
        const mask = document.querySelector(".js-mask");
        mask.classList.add("is--in");

        await new Promise((resolve) =>
            setTimeout(() => {
                mask.classList.add("is--finished");
                resolve();
            }, 1600)
        );
    }

    function showFinalText() {
        const finalText = document.querySelector(".js-final-text");
        if (finalText) {
            finalText.classList.add("is--in");
        }
    }

    return (
        <>
            <StyledContainer className="transition-mask js-mask">
                <ImageWrapper
                    className="mask left-top"
                    src="/images/game/mask-left-top.svg"
                    alt=""
                />
                <ImageWrapper
                    className="mask left-bottom"
                    src="/images/game/mask-left-bottom.svg"
                    alt=""
                />
                <ImageWrapper
                    className="mask right-top"
                    src="/images/game/mask-right-top.svg"
                    alt=""
                />
                <ImageWrapper
                    className="mask right-bottom"
                    src="/images/game/mask-right-bottom.svg"
                    alt=""
                />
            </StyledContainer>
            <FinalText className="js-final-text">
                {endingView}
            </FinalText>
        </>
    );
}

const maskLeftTopAnimation = keyframes`
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    20% {
        transform: translate(40%, 40%) scale(2);
    }
    22% {
        transform: translate(38%, 38%) scale(2);
    }
    24% {
        transform: translate(36%, 36%) scale(2);
    }
    26% {
        transform: translate(34%, 34%) scale(2);
    }
    80% {
        transform: translate(80%, 80%) scale(6);
    }
    100% {
        transform: translate(80%, 80%) scale(6);
    }
`;

const maskLeftTopAnimationMobile = keyframes`
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    20% {
        transform: translate(0%, 50%) scale(2);
    }
    22% {
        transform: translate(0%, 48%) scale(2);
    }
    24% {
        transform: translate(0%, 46%) scale(2);
    }
    26% {
        transform: translate(0%, 44%) scale(2);
    }
    80% {
        transform: translate(0%, 140%) scale(5.4);
    }
    100% {
        transform: translate(0%, 140%) scale(5.4);
    }
`;

const maskLeftBottomAnimation = keyframes`
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    20% {
        transform: translate(20%, 20%) scale(2);
    }
    22% {
        transform: translate(18%, 18%) scale(2);
    }
    24% {
        transform: translate(16%, 16%) scale(2);
    }
    26% {
        transform: translate(14%, 14%) scale(2);
    }
    80% {
        transform: translate(50%, -40%) scale(5.4);
    }
    100% {
        transform: translate(50%, -40%) scale(5.4);
    }
`;

const maskLeftBottomAnimationMobile = keyframes`
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    20% {
        transform: translate(0%, 20%) scale(2);
    }
    22% {
        transform: translate(0%, 18%) scale(2);
    }
    24% {
        transform: translate(0%, 16%) scale(2);
    }
    26% {
        transform: translate(0%, 14%) scale(2);
    }
    80% {
        transform: translate(0%, -40%) scale(5.4);
    }
    100% {
        transform: translate(0%, -40%) scale(5.4);
    }
`;

const maskRightTopAnimation = keyframes`
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    20% {
        transform: translate(-20%, 20%) scale(2.4);
    }
    22% {
        transform: translate(-28%, 28%) scale(2.4);
    }
    24% {
        transform: translate(-26%, 26%) scale(2.4);
    }
    26% {
        transform: translate(-24%, 24%) scale(2.4);
    }
    80% {
        transform: translate(-50%, 50%) scale(6.5);
    }
    100% {
        transform: translate(-50%, 50%) scale(6.5);
    }
`;

const maskRightTopAnimationMobile = keyframes`
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    20% {
        transform: translate(0%, 20%) scale(2.4);
    }
    22% {
        transform: translate(0%, 28%) scale(2.4);
    }
    24% {
        transform: translate(0%, 26%) scale(2.4);
    }
    26% {
        transform: translate(0%, 24%) scale(2.4);
    }
    80% {
        transform: translate(0%, 50%) scale(6.5);
    }
    100% {
        transform: translate(0%, 50%) scale(6.5);
    }
`;

const maskRightBottomAnimation = keyframes`
    0% {
        transform: translate(0%, 0%) scale(1);
    }
    20% {
        transform: translate(-20%, -20%) scale(2);
    }
    22% {
        transform: translate(-18%, -18%) scale(2);
    }
    24% {
        transform: translate(-16%, -16%) scale(2);
    }
    26% {
        transform: translate(-14%, -14%) scale(2);
    }
    80% {
        transform: translate(-50%, -50%) scale(6.5);
    }
    100% {
        transform: translate(-50%, -50%) scale(6.5);
    }
`;

const maskRightBottomAnimationMobile = keyframes`
    0% {
        transform: translate(60%, 0%) scale(1);
    }
    20% {
        transform: translate(60%, -20%) scale(2);
    }
    22% {
        transform: translate(60%, -18%) scale(2);
    }
    24% {
        transform: translate(60%, -16%) scale(2);
    }
    26% {
        transform: translate(60%, -14%) scale(2);
    }
    80% {
        transform: translate(60%, -50%) scale(6.5);
    }
    100% {
        transform: translate(60%, -50%) scale(6.5);
    }
`;


const StyledContainer = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    opacity: 0;

    .mask {
        position: absolute;
        transform-origin: center;
    }

    &.is--in {
        transition: opacity 0.2s ease-out;
        opacity: 1;

        .mask {
            &.left-top {
                animation: ${maskLeftTopAnimation} 1.8s ease-out forwards 1;

                ${respondTo.sm} {
                    animation: ${maskLeftTopAnimationMobile} 1.8s ease-out forwards 1;
                }
            }

            &.left-bottom {
                animation: ${maskLeftBottomAnimation} 1.8s ease-out forwards
                    1;

                ${respondTo.sm} {
                    animation: ${maskLeftBottomAnimationMobile} 1.8s ease-out forwards 1;
                }
            }

            &.right-top {
                animation: ${maskRightTopAnimation} 1.8s ease-out forwards
                    1;

                ${respondTo.sm} {
                    animation: ${maskRightTopAnimationMobile} 1.8s ease-out forwards 1;
                }
            }

            &.right-bottom {
                animation: ${maskRightBottomAnimation} 1.8s ease-out forwards
                    1;

                ${respondTo.sm} {
                    animation: ${maskRightBottomAnimationMobile} 1.8s ease-out forwards 1;
                }
            }
        }
    }

    &.is--finished {
        .mask {
            &.left-top {
                animation: none;
                transform: translate(50%, -40%) scale(5.4);
            }

            &.left-bottom {
                animation: none;
                transform: translate(50%, -40%) scale(5.4);
            }

            &.right-top {
                animation: none;
                transform: translate(-50%, 50%) scale(6.5);
            }

            &.right-bottom {
                animation: none;
                transform: translate(-50%, -50%) scale(6.5);
            }
        }
    }

    .left-top {
        top: -10%;
        left: -10%;

        width: 238px;
        height: 201px;

        ${respondTo.sm} {
            top: -4%;
            left: -18%;
        }
    }

    .left-bottom {
        bottom: -20%;
        left: -20%;

        width: 348px;
        height: 294px;

        ${respondTo.sm} {
           bottom: -30%;
           left: -34%;
        }
    }

    .right-top {
        top: -10%;
        right: -10%;

        width: 240px;
        height: 201px;

        ${respondTo.sm} {
            top: -14%;
            right: -20%;
        }
    }

    .right-bottom {
        bottom: -20%;
        right: -20%;

        width: 348px;
        height: 294px;

        ${respondTo.sm} {
            bottom: -24%;
            right: -34%;
        }
    }
`;

const FinalText = styled.div`
    position: absolute;
    inset: 0;
    z-index: 3;

    overflow: hidden;

    background: url(${getPathPrefix('/images/game/intro-final-bg.jpg')}) no-repeat center center;
    background-size: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    

    &.is--in {
        opacity: 1;
        pointer-events: auto;
    }
`;

export default forwardRef(TransitionMask);