import styled, { css } from 'styled-components'
import { Link } from 'react-router-dom';
import { SoundOn, Menu as MenuIcon, SoundOff } from '../Icons';
import Menu from './Menu';
import { useState, useEffect } from 'react';
import useMuteStore from '../../store/useMuteStore';
import { useLocation } from 'react-router-dom';
import { GAME_EVENTS } from '../../pages/GamePage';
import { ImageWrapper } from '../MediaWrapper';
import { respondTo } from '../../utils/responsive';

function Header() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [showSoundBtn, setShowSoundBtn] = useState(false);
    const [theme, setTheme] = useState("transparent") // transparent | semi-solid
    const { isMuted, setMute } = useMuteStore();
    const location = useLocation();

    const DOMAIN = process.env.REACT_APP_DOMAIN;

    useEffect(() => {
        // if hash is #result, set theme to solid
        if (location.hash === "#result") {
            setTheme("semi-solid")
        } else {
            setTheme("transparent")
        }

    }, [location.hash])

    useEffect(() => {
        window.addEventListener(GAME_EVENTS.GAME_START, () => {
            setShowSoundBtn(true);
        });
        window.addEventListener(GAME_EVENTS.GAME_END, () => {
            setShowSoundBtn(false);
        });
    }, []);

    return (
        <>
            <StyledHeader $theme={theme}>
                <a href={DOMAIN} target="_blank" rel="noopener noreferrer">
                    <ImageWrapper src="/images/typhoon-logo.svg" alt="logo" />
                </a>
                <div className="header-right">
                    {showSoundBtn && (
                        <button
                            onClick={() => setMute(!isMuted)}
                            className={`${isMuted ? "muted" : ""}`}
                        >
                            {isMuted ? <SoundOff /> : <SoundOn />}
                        </button>
                    )}
                    <button onClick={() => setIsMenuOpen(true)}>
                        <MenuIcon />
                    </button>
                </div>
            </StyledHeader>
            <Menu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
        </>
    );
}

const StyledHeader = styled.nav`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 22px 32px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: var(--header-height);

    ${({ $theme }) => $theme === "semi-solid" && css`
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
    `}

    ${respondTo.lg} {
        padding: 24px;
        padding-bottom: 16px;
    }

    a {
        display: flex;
        width: fit-content;


        ${respondTo.lg} {
            height: 30px;

            img {
                height: 100%;
            }
        }
    }

    .header-right {
        display: flex;
        gap: 24px;

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

    button {
        border-radius: 8px;
        background: var(--neutrals-000);
        border: 2px solid var(--neutrals-900);

        --size: 48px;
        width: var(--size);
        height: var(--size);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-out;

        ${respondTo.lg} {
            --size: 32px;
        
            svg {
                height: 10px;
            }
        }

        &:hover {
            transform: translate(-2px, -2px);
            background: var(--main-color-b);
            box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.45);
        }

        &:active {
            transform: translate(0px, 0px);
            background: #ffce00;
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45);
        }

        &.muted {
            background: white;
        }
    }
`;

export default Header;