import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";
import styled from "styled-components";
import { breakpoints, respondTo, useMediaSelectTo } from "../../utils/responsive";
import { useEffect, useRef } from "react";

function GameContentFrame({ children, ref }) {
    const isMobile = useMediaSelectTo(breakpoints.sm);
    const gameFrameRef = useRef(null);
    const frameRef = useRef(null);

    useEffect(() => {
        const gameFrame = gameFrameRef.current;

        if (typeof isMobile === "boolean" && isMobile) {
            const gameWidth = window.innerWidth - 32;
            const gameLayer = frameRef.current;
            const gameLayerWidth = gameLayer.clientWidth;
            const scrollLeft = (gameLayerWidth - gameWidth) / 2;
            // set gameFrame scrollLeft to center, not use scrollTo
            gameFrame.contentWrapperEl.scrollLeft = scrollLeft;
        }
        }, [isMobile]);

    return (
        <StyledContainer
            className="game-frame"
            ref={(e) => {
                gameFrameRef.current = e;
                if (ref) {
                    ref.current = e;
                }
            }}
            style={{ maxWidth: "100%", maxHeight: "100%" }}
        >
            <div className="frame-wrapper" ref={frameRef}>
                {children}
            </div>
        </StyledContainer>
    );
}

const StyledContainer = styled(SimpleBar)`
    width: 100%;
    height: 100%;
    overflow: hidden;

    ${respondTo.sm} {
        --game-width: calc(100vw - 32px);
        --game-height: calc(var(--width) * (536 / 343));
        --layer-height: calc(var(--game-width) * (536 / 343) * 0.9);
        --layer-width: calc(var(--game-height) * (816 / 459) * 0.9);

        width: 100%;
        height: 100%;
        overflow-x: scroll;
        max-width: 100%;

        &:after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            width: 100%;
            height: 80px;
            background-color: white;
        }

        .simplebar-horizontal {
            bottom: 10px;
            background: var(--neutrals-200);
            transform: scaleX(0.8);
            border-radius: 100px;
            height: 6px;

            .simplebar-scrollbar::before {
                opacity: 1 !important;

                top: 0px;
                bottom: 0px;
                border-radius: 100px;
            }
        }
    }

    video {
        // z-index: -1;
    }

    video,
    .layer,
    .bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;

        pointer-events: none;

        img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        ${respondTo.sm} {
            height: var(--layer-height);
            width: var(--layer-width);
        }
    }

    .bg {
        
    }

    .frame-wrapper {
        position: relative;
        --width: 912px;
        --height: calc(var(--width) * 0.568);
        width: var(--width);
        height: var(--height);
        background: white;

        ${respondTo.sm} {
            position: relative;
            inset: unset;

            height: var(--layer-height);
            width: var(--layer-width);
        }
    }
`;

export default GameContentFrame;