import closeIcon from '../assets/icons/close.svg';
import discordIcon from '../assets/icons/discord.svg';
import telegramIcon from '../assets/icons/telegram.svg';
import giteaIcon from '../assets/icons/gitea.svg';
import { NavLink } from 'react-router-dom';

function SideMenu({ isMenuOpen, setIsMenuOpen }) {
  return (
    <>
      <div
        className={`flex flex-col fixed top-0 left-0 w-full h-full bg-black transition-transform transform ${
          isMenuOpen ? 'translate-x-0' : '-translate-x-full'
        } z-50`}
        style={{ transitionDuration: '0.3s' }}
      >
        <div className="grow flex flex-col bg-gray-950/55">
          <div className="h-16 w-full border-b-2 border-white/5 flex flex-row">
            <div className="w-1/4 h-full"></div>
            <p className="grow text-white md:text-2xl font-bold text-center flex items-center justify-center p-4">
              CDRM-Project
            </p>
            <div className="w-1/4 h-full">
              <button
                className="w-full h-full flex items-center justify-center"
                onClick={() => setIsMenuOpen(false)}
              >
                <img src={closeIcon} alt="Close" className="w-1/2 h-1/2 cursor-pointer" />
              </button>
            </div>
          </div>

          <div className="overflow-y-auto grow flex flex-col p-5 w-full space-y-2">
            <NavLink
              to="/"
              className={({ isActive }) =>
                `flex flex-row p-3 border-l-4 ${
                  isActive
                    ? 'border-l-sky-500/50 bg-black/50 text-white'
                    : 'border-transparent hover:border-l-sky-500/50 hover:bg-white/5 text-white/80'
                }`
              }
              onClick={() => setIsMenuOpen(false)}
            >
              Home
            </NavLink>

            <NavLink
              to="/cache"
              className={({ isActive }) =>
                `flex flex-row p-3 border-l-4 ${
                  isActive
                    ? 'border-l-emerald-500/50 bg-black/50 text-white'
                    : 'border-transparent hover:border-l-emerald-500/50 hover:bg-white/5 text-white/80'
                }`
              }
              onClick={() => setIsMenuOpen(false)}
            >
              Cache
            </NavLink>

            <NavLink
              to="/api"
              className={({ isActive }) =>
                `flex flex-row p-3 border-l-4 ${
                  isActive
                    ? 'border-l-indigo-500/50 bg-black/50 text-white'
                    : 'border-transparent hover:border-l-indigo-500/50 hover:bg-white/5 text-white/80'
                }`
              }
              onClick={() => setIsMenuOpen(false)}
            >
              API
            </NavLink>

            <NavLink
              to="/testplayer"
              className={({ isActive }) =>
                `flex flex-row p-3 border-l-4 ${
                  isActive
                    ? 'border-l-rose-700/50 bg-black/50 text-white'
                    : 'border-transparent hover:border-l-rose-700/50 hover:bg-white/5 text-white/80'
                }`
              }
              onClick={() => setIsMenuOpen(false)}
            >
              Test Player
            </NavLink>
          </div>

          <div className="h-16 self-end w-full flex flex-row bg-white/5">
            <a
              href="https://discord.cdrm-project.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="w-1/3 h-full flex items-center justify-center hover:bg-blue-950"
            >
              <img src={discordIcon} alt="Discord" className="w-full h-full p-1 cursor-pointer" />
            </a>
            <a
              href="https://telegram.cdrm-project.com"
              target="_blank"
              rel="noopener noreferrer"
              className="w-1/3 h-full flex items-center justify-center hover:bg-blue-400"
            >
              <img src={telegramIcon} alt="Telegram" className="w-full h-full p-1 cursor-pointer" />
            </a>
            <a
              href="https://cdm-project.com/tpd94/cdrm-project"
              target="_blank"
              rel="noopener noreferrer"
              className="w-1/3 h-full flex items-center justify-center hover:bg-green-700"
            >
              <img src={giteaIcon} alt="Gitea" className="w-full h-full p-1 cursor-pointer" />
            </a>
          </div>
        </div>
      </div>
    </>
  );
}

export default SideMenu;