import styled, { css } from 'styled-components';
import { Close } from '../Icons';
import { Link } from 'react-router-dom';
import getPathPrefix from '../../utils/getPathPrefix';
import { respondTo } from '../../utils/responsive';
import { ImageWrapper } from '../MediaWrapper';
import { useNavigate } from 'react-router-dom';

const Menu = ({ isOpen, onClose }) => {
    const navigate = useNavigate()

    const handleLinkClick = (e) => {
        onClose();
    }


    return (
        <StyledMenu $isOpen={isOpen}>
            <div className="menu-content">
                <div className="menu-header">
                    <Link to="/">
                        <ImageWrapper src="/images/logo.png" alt="logo" />
                    </Link>
                    <button onClick={onClose}>
                        <Close />
                    </button>
                </div>
                <LinkList>
                    <Link
                        to={getPathPrefix("/")}
                        onClick={() => handleLinkClick(getPathPrefix("/"))}
                    >
                        回到遊戲畫面
                    </Link>
                    <Link
                        to={getPathPrefix("/about")}
                        onClick={() => handleLinkClick(getPathPrefix("/about"))}
                    >
                        遊戲背景介紹
                    </Link>
                    <Link
                        to={getPathPrefix("/knowledge")}
                        onClick={() =>
                            handleLinkClick(getPathPrefix("/knowledge"))
                        }
                    >
                        防災知識補給
                    </Link>
                </LinkList>
                <div className="menu-footer">
                    <Link to="/" className="ncdr-link">
                        <ImageWrapper src="/images/ncdr-logo.png" alt="logo" />
                    </Link>
                    <p className="copyright">
                        Copyright© 2024 行政法人國家災害防救科技中心
                        <br />
                        All rights reserved.
                    </p>
                </div>
            </div>
        </StyledMenu>
    );
}

const StyledMenu = styled.div`
    position: absolute;
    top: 0;
    right: 0;
    width: 228px;

    height: 100%;
    z-index: 100;
    background: #ffd423;

    padding: 20px 32px;
    transform: translateX(100%);
    transition: transform 0.2s ease-out;

    a, button {
        cursor: pointer;
    }

    ${respondTo.lg} {
        width: 100vw;
    }

    ${({ $isOpen }) =>
        $isOpen &&
        css`
            transform: translateX(0);
        `}

    .menu-content {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .menu-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        margin-top: auto;

    
        .ncdr-link {
            width: calc(100% - 24px);

            img {
                width: 100%;
            }

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

    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        button {
            margin-left: auto;
        }

        a {
            display: none;

            ${respondTo.lg} {
                display: block;

                width: 40px;

                img {
                    width: 100%;
                }
            }
        }
    }

    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;

        /* position: absolute;
        top: 20px;
        right: 32px; */

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

            svg {
                height: 10px;
            }
        }
    }

    .copyright {
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 18px */
        font-size: 12px;
        color: var(--neutrals-600);
        text-align: center;

        margin-top: auto;

        ${respondTo.lg} {
            font-size: 10px;
        }
    }
`;

const LinkList = styled.div`
    display: flex;
    flex-direction: column;
    margin-top: 20vh;

    a {
        display: flex;
        justify-content: center;
        padding: 16px 32px;
        text-align: center;
        font: var(--headline-6);
        color: var(--neutrals-700);
        white-space: nowrap;

        border-bottom: 1px solid var(--main-color-b);

        ${respondTo.lg} {
            font: var(--mobile-headline-6);
        }
    }
`;

export default Menu;
