import { useEffect, useState, useRef } from 'react';
import styled, { css } from 'styled-components';
import { ImageWrapper } from '../../components/MediaWrapper';
import { respondTo } from '../../utils/responsive';

const IMAGE_SIZE = 64;

const CatPawCursor = () => {
    const [isMoving, setIsMoving] = useState(false);
    const [isActive, setIsActive] = useState(false);
    const cursorRef = useRef(null);

    useEffect(() => {
        if (window.innerWidth < 568) return;

        const updatePosition = (e) => {
            if (!cursorRef.current) return;
            if (!isMoving) {
                setIsMoving(true);
            }
            // cat paw cursor moves relative to screen
            const x = e.clientX;
            const y = e.clientY;

            cursorRef.current.style.left = `${x}px`;
            cursorRef.current.style.top = `${y}px`;
        };

        window.addEventListener('mousemove', updatePosition);

        // if user click, set isActive to true
        window.addEventListener('mousedown', () => {
            setIsActive(true);
        });

        window.addEventListener('mouseup', () => {
            setIsActive(false);
        });
 
        const frameContainer = document.getElementById("frame-container");

        // listen to dom tree change
        const observer = new MutationObserver((mutationsList, observer) => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    const buttons = frameContainer.querySelectorAll("button");
                    buttons.forEach(button => {
                        button.style.cursor = "none";
                    });
                }
            }
        });

        observer.observe(frameContainer, { childList: true });

        return () => {
            window.removeEventListener('mousemove', updatePosition);
            window.removeEventListener('mousedown', () => {
                setIsActive(true);
            });
            window.removeEventListener('mouseup', () => {
                setIsActive(false);
            });

            observer.disconnect();
        };
    }, []);

    return (
        <StyledCursor
            ref={cursorRef}
            $isShow={isMoving}
            $isActive={isActive}
            className="cat-paw-cursor"
        >
            <ImageWrapper
                className="cursor-default"
                src="/images/game/cursor-default.png"
                alt="cat paw cursor"
            />
            <ImageWrapper
                className="cursor-active"
                src="/images/game/cursor-active.png"
                alt="cat paw cursor"
            />
        </StyledCursor>
    );
};

const StyledCursor = styled.div`
    position: fixed;
    pointer-events: none;
    z-index: 9;
    width: ${IMAGE_SIZE}px;
    height: ${IMAGE_SIZE}px;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;

    opacity: ${({ $isShow }) => $isShow ? 1 : 0};

    --size: 80px;
    width: var(--size);
    height: var(--size);

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 0;
    }

    .cursor-default {
        opacity: 1;
    }

    .cursor-active {
        opacity: 0;
    }

    ${({ $isActive }) => $isActive && css`
        .cursor-active {
            opacity: 1;
        }

        .cursor-default {
            opacity: 0;
        }
    `}


    ${respondTo.sm} {
        display: none !important;
    }


    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

`;

export default CatPawCursor;
