import styled from "styled-components";
import { GAME_STATES } from "./index";
import { respondTo } from "../../utils/responsive";
import { useGameContext } from "./index";

function Meter({ className }) {
    const { gameState } = useGameContext();

    const getPassedState = (currentState, targetState) => {
        const CHAPTERS_ORDER = [
            GAME_STATES.CHAPTER1,
            GAME_STATES.CHAPTER2,
            GAME_STATES.CHAPTER3,
            GAME_STATES.CHAPTER4,
        ];
        const currentIndex = CHAPTERS_ORDER.indexOf(currentState);
        const targetIndex = CHAPTERS_ORDER.indexOf(targetState);
        return currentIndex > targetIndex;
    };

    return (
        <StyledContainer className={`${gameState.includes("CHAPTER") ? "--show" : ""} ${className}`}>
            <span>關卡</span>
            <div className="meter-container">
                <span className="line" />
                <div
                    className={`meter-number ${
                        gameState === GAME_STATES.CHAPTER1 ? "active" : ""
                    } ${
                        getPassedState(gameState, GAME_STATES.CHAPTER1)
                            ? "passed"
                            : ""
                    }`}
                >
                    <div className="active">1</div>
                    <div className="normal" />
                </div>
                <div
                    className={`meter-number ${
                        gameState === GAME_STATES.CHAPTER2 ? "active" : ""
                    } ${
                        getPassedState(gameState, GAME_STATES.CHAPTER2)
                            ? "passed"
                            : ""
                    }`}
                >
                    <div className="active">2</div>
                    <div className="normal" />
                </div>
                <div
                    className={`meter-number ${
                        gameState === GAME_STATES.CHAPTER3 ? "active" : ""
                    } ${
                        getPassedState(gameState, GAME_STATES.CHAPTER3)
                            ? "passed"
                            : ""
                    }`}
                >
                    <div className="active">3</div>
                    <div className="normal" />
                </div>
                <div
                    className={`meter-number ${
                        gameState === GAME_STATES.CHAPTER4 ? "active" : ""
                    } ${
                        getPassedState(gameState, GAME_STATES.CHAPTER4)
                            ? "passed"
                            : ""
                    }`}
                >
                    <div className="active">4</div>
                    <div className="normal" />
                </div>
            </div>
        </StyledContainer>
    );
}

const StyledContainer = styled.div`
    border-radius: 12px;
    border: 6px solid var(--neutrals-700);
    background: #fff;

    box-shadow: 5px 6px 4px 0px rgba(0, 0, 0, 0.25);

    display: flex;
    width: fit-content;
    align-items: center;
    padding: 8px 32px;
    color: var(--neutrals-700);
    gap: 32px;
    height: 70px;

    box-shadow: 5px 6px 4px 0px rgba(0, 0, 0, 0.25);

    opacity: 0;
    pointer-events: none;

    ${respondTo.sm} {
        padding: 8px 16px;
        gap: 12px;
        border-radius: 8px;
        border-width: 4px;
        box-shadow: var(--shadow-m);

        height: 56px;
    }

    &.--show {
        opacity: 1;
        pointer-events: auto;
    }

    > span {
        font-size: 20px;
        font-weight: 900;
        line-height: 120%; /* 24px */

        ${respondTo.sm} {
            font: var(--mobile-headline-5);
            white-space: nowrap;
        }
    }

    .meter-container {
        display: flex;
        align-items: center;
        gap: 32px;

        position: relative;

        ${respondTo.sm} {
            gap: 12px;
        }

        .line {
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 0;
            border-top: 4px dashed #c7c7c7;
        }
    }

    .meter-number {
        position: relative;

        &:before {
            content: "";
            width: 32px;
            height: 4px;
            background: #ffc800;

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

            opacity: 0;
        }

        .active {
            display: none;

            --size: 48px;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            border: 3px solid var(--main-color-e);
            background: #ffbe46;

            justify-content: center;
            align-items: center;
            color: #fff;

            font-size: 26px;
            font-weight: 600;
            font-family: "Baloo Paaji 2", sans-serif;

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

            ${respondTo.sm} {
                --size: 24px;
                font-size: 16px;
                border-width: 2px;
            }
        }

        .normal {
            display: block;
            position: relative;

            --size: 14px;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            border: 3px solid var(--main-color-e);
            background: #eee;

            ${respondTo.sm} {
                --size: 12px;
                border-width: 2px;
            }
        }

        &.passed {
            .normal {
                background: #fba67d;
            }

            &:before {
                opacity: 1;
            }
        }

        &.active {
            .normal {
                // display: none;
            }

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

export default Meter;