import React, { useEffect } from "react";
import classNames from "classnames/bind";
import styles from "./Menu.scss";
import { Link, useLocation } from "react-router-dom";
import { ReactComponent as IconClose } from "@assets/img/svg/ico_close.svg";
import { ReactComponent as IconTwitter } from "@assets/img/svg/ico_twitter.svg";
import { ReactComponent as IconInstagram } from "@assets/img/svg/ico_insta.svg";
import { ReactComponent as IconDiscord } from "@assets/img/svg/ico_discord.svg";
import { ReactComponent as IconFacebook } from "@assets/img/svg/ico_facebook.svg";
import URLInfo from "@src/constants/URLInfo";
import { useSelector } from "react-redux";
import useLogin from "@src/hooks/useLogin";
import { YoutubeIcon } from "../common/icon/youtube";
const cx = classNames.bind(styles);

interface IOwnProps {
  onClose: () => void;
}

const Menu: React.FC<IOwnProps> = ({ onClose }) => {
  const location = useLocation();
  const { userInfo } = useSelector((store) => store.user);
  const { isLogin, handleClickLoginButton, loginText } = useLogin();

  useEffect(() => {
    onClose();
  }, [location]);

  const isProfileUserPage =
    URLInfo.isProfileUserPage(location) &&
    location.pathname.split("/")[2] === userInfo?.simple_profile.name;

  return (
    <div className={cx("menu_group")}>
      <button type="button" className={cx("btn_close")} onClick={onClose}>
        <span className={cx("blind")}>X</span>
        <IconClose className={cx("ico_close")} />
      </button>
      <ul className={cx("menu_list")}>
        {/* <li
          className={cx("menu_item")}
          aria-selected={URLInfo.isExplorePage(location)}
        >
          <Link to={URLInfo.EXPLORE} className={cx("menu")}>
            탐색하기
          </Link>
        </li>
        {userInfo && (
          <li className={cx("menu_item")} aria-selected={isProfileUserPage}>
            <Link
              to={URLInfo.getProfileUserUrl(userInfo.simple_profile.name)}
              className={cx("menu")}
            >
              내 프로필
            </Link>
          </li>
        )} */}
        {/* <li
          className={cx("menu_item")}
          aria-selected={URLInfo.isActivityPage(location)}
        >
          <Link to={URLInfo.ACTIVITY} className={cx("menu")}>
            활동
          </Link>
        </li> */}
      </ul>
      <div className={cx("community_area")}>
        <strong className={cx("community_title")}>커뮤니티</strong>
        <ul className={cx("community_list")}>
          <li className={cx("community_item")}>
            <a
              href={URLInfo.registerArtistUrl}
              target="_blank"
              className={cx("link_community")}
            >
              작가등록
            </a>
          </li>
          <li className={cx("community_item")}>
            <a
              href="https://drive.google.com/drive/folders/1rHqNh2zosyYv9XfUmbOAwWvSQMSynoF0?usp=sharing"
              className={cx("link_community")}
              target="_blank"
            >
              백서 (White paper)
            </a>
          </li>
          <li className={cx("community_item")}>
            <Link to="#" className={cx("link_community")}>
              02-2038-8262 (월~금 9am~6pm 유료전화)
            </Link>
          </li>
          <li className={cx("community_item")}>
            <Link to="#" className={cx("link_community")}>
              구독하기 (Subscribe)
            </Link>
          </li>
          <li className={cx("community_item")}>
            <Link to={URLInfo.GUIDE} className={cx("link_community")}>
              사용방법
            </Link>
          </li>
          <li className={cx("community_sns")}>
            <a
              href="https://twitter.com/metarare_nft"
              target="_blank"
              className={cx("link_sns")}
            >
              <span className={cx("blind")}>Twitter</span>
              <IconTwitter className={cx("ico_sns")} />
            </a>
            <a
              href="https://www.instagram.com/metarare_official/"
              target="_blank"
              className={cx("link_sns")}
            >
              <span className={cx("blind")}>Instagram</span>
              <IconInstagram className={cx("ico_sns")} />
            </a>
            <a
              href="https://www.youtube.com/channel/UC08Jk0jzWohvjQT0H62Y17Q
"
              target="_blank"
              className={cx("link_sns_u")}
            >
              <YoutubeIcon />
              <span className={cx("blind")}>Youtube</span>
            </a>
            <a
              href="https://www.facebook.com/MetaRare-NFT-lnc-112216471398493"
              target="_blank"
              className={cx("link_sns")}
            >
              <span className={cx("blind")}>Discord</span>
              <IconFacebook className={cx("ico_sns_facebook")} />
            </a>
          </li>
        </ul>
      </div>
      <li
        className={cx("menu_item")}
        aria-selected={URLInfo.isGuidePage(location)}
      >
        <Link to={URLInfo.EXPLORE} className={cx("menu")}>
          Top 100
        </Link>
      </li>
      <div className={cx("btn_area")}>
        {isLogin && (
          <Link to={URLInfo.CREATE} className={cx("link", "link_make")}>
            만들기
          </Link>
        )}
        <button
          type="button"
          className={cx("link", "link_login")}
          onClick={handleClickLoginButton}
        >
          {loginText}
        </button>
        {!isLogin && (
          <Link to={URLInfo.REGISTER} className={cx("link", "link_login")}>
            회원가입
          </Link>
        )}
      </div>
    </div>
  );
};

export default Menu;
