import styled, { keyframes } from 'styled-components'
import { createPortal } from 'react-dom'
import Slider from 'react-slick'
import { useState } from 'react'
import BorderShadowButton, { THEMES } from '../../../components/BorderShadowButton'
import { GoArrow } from '../../../components/Icons'
import { useGameContext, GAME_STATES } from '..'
import { ImageWrapper } from '../../../components/MediaWrapper';
import getPathPrefix from '../../../utils/getPathPrefix'
import { respondTo } from '../../../utils/responsive'


const STEPS = [
    {
        text: "防災遊戲總計四關",
        image: `/images/game/tutorial-1.jpg`,
    },
    {
        text: "你可以點擊檢視物件準備物品，或再點一次取消準備",
        image: `/images/game/tutorial-2.jpg`,
    },
    {
        text: "準備完物品後，點擊畫面右下角準備完成，進入下一關",
        image: `/images/game/tutorial-3.jpg`,
    },
    {
        text: "每關限時一分鐘，準備開始遊戲了嗎？",
        image: `/images/game/tutorial-4.jpg`,
    },
];

const MOBILE_STEPS = [
    {
        text: "防災遊戲總計四關",
        image: `/images/game/tutorial-1-m.jpg`,
    },
    {
        text: "你可以左右滑動來瀏覽整個畫面",
        image: `/images/game/tutorial-2-m.jpg`,
    },
    {
        text: "你可以點擊檢視物件準備物品，或再點一次取消準備",
        image: `/images/game/tutorial-3-m.jpg`,
    },
    {
        text: "準備完物品後，點擊畫面右下角準備完成，進入下一關",
        image: `/images/game/tutorial-4-m.jpg`,
    },
    {
        text: "每關限時一分鐘，準備開始遊戲了嗎？",
        image: `/images/game/tutorial-5-m.jpg`,
    },
];

function TutorialModal({ isOpen, onClose }) {
    const [currentStep, setCurrentStep] = useState(0);
    const { setGameCurrentState, wipeOutAndStartNextChapter } =
        useGameContext();
    const root = window.innerWidth < 568 ? "modal" : "modal-root";
    const steps = window.innerWidth < 568 ? MOBILE_STEPS : STEPS;

    const settings = {
        dots: false,
        infinite: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true,
        prevArrow: <button disabled={currentStep === 0}>
            <svg
            xmlns="http://www.w3.org/2000/svg"
            width="30"
            height="34"
            viewBox="0 0 30 34"
            fill="none"
        >
            <path
                d="M3 22.1961C-1 19.8867 -1 14.1132 3 11.8038L21 1.41154C25 -0.897863 30 1.98889 30 6.60769L30 27.3923C30 32.0111 25 34.8979 21 32.5885L3 22.1961Z"
                fill="currentColor"
                />
            </svg>
        </button>,
        nextArrow: <button disabled={currentStep === steps.length - 1}>
             <svg
                xmlns="http://www.w3.org/2000/svg"
                width="30"
                height="34"
                viewBox="0 0 30 34"
                fill="none"
            >
                <path
                    d="M27 11.8039C31 14.1133 31 19.8868 27 22.1962L9 32.5885C5 34.8979 4.65203e-07 32.0111 4.10124e-07 27.3923L1.6227e-07 6.6077C1.07191e-07 1.9889 5 -0.897856 9 1.41155L27 11.8039Z"
                    fill="currentColor"
                />
            </svg>
        </button>,
        afterChange: (current) => {
            setCurrentStep(current);
        }
        
    };

    const handleNext = () => {
        onClose();
        // setGameCurrentState(GAME_STATES.CHAPTER1);
        // wipeOutAndStartNextChapter(GAME_STATES.CHAPTER1);
    }

    if (!isOpen) return null;

    return createPortal(
        <StyledContainer>
            <ModalContent>
                <div className="content-container">
                    <h2>遊戲說明</h2>
                    <p>{steps[currentStep].text}</p>
                    <StyledSlider {...settings}>
                        {steps.map((step, index) => (
                            <div key={index} className="step-container">
                                <ImageWrapper
                                    src={step.image}
                                    alt={`tutorial-${index + 1}`}
                                />
                            </div>
                        ))}
                    </StyledSlider>
                    <Dots>
                        {steps.map((step, index) => (
                            <button
                                key={index}
                                className={`step-dot ${
                                    currentStep >= index ? "active" : ""
                                }`}
                            />
                        ))}
                    </Dots>
                    <BorderShadowButton
                        onClick={handleNext}
                        className={`next-btn active`}
                        text={`${currentStep === steps.length - 1 ? "開始遊戲" : "跳過"}`}
                        icon={<GoArrow />}
                        size="s"
                        theme={THEMES.LIGHT}
                    ></BorderShadowButton>
                </div>
            </ModalContent>
        </StyledContainer>,
        document.getElementById(root)
    );
}

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

const StyledContainer = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 223, 90, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1000;
`;

const ModalContent = styled.div`
    width: 832px;
    height: 438px;
    background: white;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: url(${getPathPrefix("/images/game/tutorial-frame.svg")})
        no-repeat center center;
    background-color: white;
    border-radius: 20px;
    background-size: cover;
    box-shadow: var(--shadow);

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

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

    ${respondTo.sm} {
        width: 327px;
        height: 522px;
        background: url(${getPathPrefix("/images/game/tutorial-frame-m.svg")})
            no-repeat center center;
        background-color: white;
        border-radius: 32px;
        box-shadow: var(--shadow-m);
        padding: 28px;
    }

    .content-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--neutrals-700);
    }

    h2 {
        font: var(--headline-4);
        margin-bottom: 4px;

        ${respondTo.sm} {
            font: var(--mobile-headline-4);
        }
    }

    h2 + p {
        font: var(--paragraph-2);
        margin-bottom: 20px;
        font-weight: 700;

        ${respondTo.sm} {
            font: var(--mobile-paragraph-2);
            font-weight: 700;
            text-align: center;
        }
    }

    .next-btn {
        margin-top: 20px;

        display: none;

        &.active {
            display: flex;
        }
    }
`;


const StyledSlider = styled(Slider)`
    width: 408px;
    position: relative;

    ${respondTo.sm} {
        width: 190px;

        .slick-list {
            margin-left: -8px;
            margin-right: -8px;
            overflow: hidden;
        }
    }

    .slick-arrow {
        position: absolute;
        top: 50%;
        z-index: 2;
        cursor: pointer;

        color: var(--main-color-a);

        ${respondTo.sm} {
            svg {
                width: 24px;
                height: 28px;
            }
        }

        &.slick-prev {
            left: 0px;
            transform: translate(-100%, -50%);

            ${respondTo.sm} {
                left: -8px;
            }
        }

        &.slick-next {
            right: 0px;
            transform: translate(100%, -50%);

            ${respondTo.sm} {
                right: -8px;
            }
        }

        &:disabled {
            color: var(--neutrals-300);
        }
    }

    .slick-track {
        display: flex !important;
    }

    .slick-list {
        overflow: hidden;

    }
    
    .slick-slide {
        padding: 0 24px;

        ${respondTo.sm} {
            padding: 0 8px;
        }
    }
`;

const Dots = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;

    button {
        --size: 10px;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: var(--neutrals-300);
        cursor: default;

        &.active {
            background: var(--neutrals-700);
        }
    }
`;
export default TutorialModal;
