import styled, { keyframes } from 'styled-components';
import { ClickHint } from '../../components/Icons';
import { useState, useEffect } from 'react';
import getPathPrefix from '../../utils/getPathPrefix';
import { respondTo } from '../../utils/responsive';

export const EVENTS = {
    PLAY_DIALOG: "play-dialog",
    NEXT_DIALOG: "next-dialog",
};

export const DISPATCH_PLAY_DIALOG = (dialog) => {
    const dialogNextEvent = new CustomEvent(EVENTS.PLAY_DIALOG, {
        detail: dialog,
    });
    document.dispatchEvent(dialogNextEvent);
};

export const DISPATCH_NEXT_DIALOG = () => {
    const dialogNextEvent = new CustomEvent(EVENTS.NEXT_DIALOG);
    document.dispatchEvent(dialogNextEvent);
};

function Dialog() {
    const [currentDialog, setCurrentDialog] = useState(null);

    const handleDialogClick = () => {
        DISPATCH_NEXT_DIALOG();
    };

    useEffect(() => {
        document.addEventListener(EVENTS.PLAY_DIALOG, (event) => {
            setCurrentDialog(event.detail);
        });
    }, []);

    if (!currentDialog) return null;

    return (
        <StyledContainer onClick={handleDialogClick}>
            <div id="dialog-content">
                <p>{currentDialog}</p>
            </div>
            <div className="click-hint">
                <span>點擊繼續</span>
                <ClickHint />
            </div>
        </StyledContainer>
    );
}

const fadeIn = keyframes`
    from {
        opacity: 0;
        transform: translate(-50%, 54%)
    }
    to {
        opacity: 1;
        transform: translate(-50%, 50%)
    }
`;

const pointDown = keyframes`
    from {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10%);
    }

    to {
        transform: translateY(0);
    }
`;

const StyledContainer = styled.div`
    position: absolute;
    bottom: 0;
    left: 0;
    width: 744px;
    min-height: 140px;
    z-index: 2;

    left: 50%;
    transform: translate(-50%, 50%);

    padding: 25px 30px;
    background-image: url(${getPathPrefix("/images/game/dialog-bg.png")});
    background-size: cover;
    background-blend-mode: plus-darker, normal;
    box-shadow: 6px 6px 0px 0px rgba(148, 116, 0, 0.3);
    border: 6px solid var(--neutrals-700);
    border-radius: 20px;
    font: var(--paragraph-1);
    color: var(--neutrals-700);

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

    ${respondTo.sm} {
        width: calc(100vw - 98px);
        height: 100px;
        background: url(${getPathPrefix("/images/game/dialog-bg-m.png")})
            no-repeat center center;
        background-size: cover;
        border-width: 5px;
        box-shadow: 6px 6px 0px 0px rgba(49, 38, 0, 0.3);
        padding: 20px;
        padding-bottom: 40px;
        font: var(--mobile-paragraph-2);
        font-weight: 700;
        bottom: 60px;
    }

    .click-hint {
        position: absolute;
        right: 24px;
        bottom: 20px;

        display: flex;
        align-items: center;
        justify-content: center;
        font: var(--small-text-1);
        font-weight: 700;
        color: var(--main-color-e);

        svg {
            animation: ${pointDown} 1s ease-out infinite;
        }

        ${respondTo.sm} {
            right: 10px;
            bottom: 10px;
        }
    }

    p {
        white-space: pre-wrap;
    }
`;

export default Dialog;