import styled, { keyframes } from 'styled-components';
import { useEffect, useRef } from 'react';
import { DISPATCH_PLAY_DIALOG, EVENTS } from '../Dialog';
import BorderShadowButton, { THEMES } from '../../../components/BorderShadowButton';
import { GoArrow } from '../../../components/Icons';
import { useGameContext, GAME_STATES } from '../index';
import TransitionMask from '../TransitionMask';
import { DISPATCH_PLAY_MUSIC } from '../AudioController';
import { DISPATCH_GAME_START_EVENT } from '../index';
import { ImageWrapper } from '../../../components/MediaWrapper';
import { respondTo } from '../../../utils/responsive';

const DIALOGS = [
    `貓貓在天氣總是很好的小鎮生活著，雖然沒有刺激冒險可言，\n但吃好、睡好、曬太陽，貓貓已經非常滿足！`,
    `「啊～好希望貓生能永遠那麼平順啊！」 \n貓貓心裡這麼想著。`,
];

function IntroView() {
    const currentDialogRef = useRef(0);
    const { wipeOutAndStartNextChapter } = useGameContext();
    const transitionMaskRef = useRef(null);


    useEffect(() => {

        setTimeout(() => {
            DISPATCH_PLAY_DIALOG(DIALOGS[currentDialogRef.current]);
        }, 400);

        const handleEvent = () => {
            if (currentDialogRef.current < DIALOGS.length - 1) {
                currentDialogRef.current++;
                DISPATCH_PLAY_DIALOG(DIALOGS[currentDialogRef.current]);
            } else {
                DISPATCH_PLAY_DIALOG(null);
                showText().then(() => {
                    transitionMaskRef.current.play();
                });
            }
        }

        document.addEventListener(EVENTS.NEXT_DIALOG, handleEvent);

        DISPATCH_PLAY_MUSIC("/audios/01.mp3");
        DISPATCH_GAME_START_EVENT();

        return () => {
            document.removeEventListener(EVENTS.NEXT_DIALOG, handleEvent)
        }
    }, []);

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

        await new Promise(resolve => setTimeout(resolve, 1000));
    }

    function handleNext() {
        wipeOutAndStartNextChapter(GAME_STATES.TUTORIAL);
        // setGameCurrentState(GAME_STATES.TUTORIAL);
    }


    return (
        <StyledContainer>
            <ImageWrapper
                className="intro-bg"
                src="/images/game/intro-bg.webp"
                m_src="/images/game/intro-bg-m.webp"
                alt="intro-bg"
            />
            <Text className="js-text">不過......當心了！！</Text>
            <TransitionMask
                ref={transitionMaskRef}
                endingView={
                    <Ending>
                        <p>
                            危機總會在貓無防備的時候來敲門⋯⋯
                            <br />
                            你有沒有想過，對於總是出其不意的世界，
                            <br />
                            你的守備指數是多少呢？
                            <br />
                            邀請你進入遊戲，提前準備、防患未然！
                        </p>
                        <BorderShadowButton
                            theme={THEMES.LIGHT}
                            text="進入遊戲"
                            icon={<GoArrow />}
                            onClick={handleNext}
                            rotateText={false}
                        ></BorderShadowButton>
                    </Ending>
                }
            />
        </StyledContainer>
    );
}

const fadeIn = keyframes`
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
`;


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

    // flex center
    display: flex;
    justify-content: center;
    align-items: center;

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

        animation: ${fadeIn} 1s ease-out 1;

        ${respondTo.sm} {
            object-fit: cover;
        }
    }
`;

const Text = styled.p`
    font: var(--headline-5);

    position: absolute;
    // center
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);

    opacity: 0;
    transition: opacity 0.2s ease-out;

    ${respondTo.sm} {
        font: var(--mobile-headline-5);
        top: 100px;
    }

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

const Ending = styled.div`
    display: flex;
    gap: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: #fff;
    font: var(--paragraph-1);
    text-align: center;

    width: 100%;
    height: 100%;

    ${respondTo.sm} {
        gap: 20px;
        font: var(--mobile-paragraph-1);
        padding: 24px;
    }

    button {
        padding: 12px 16px;
    }

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

export default IntroView;
