import Image from "next/image";
import React, { useContext, useEffect } from "react";

import { useRouter } from "next/router";
import Link from "next/link";
import ClickAwayListener from "react-click-away-listener";

import hideNav from "../../../helpers/hideNav";
import showNav from "../../../helpers/showNav";
import AppContext from "../../particles/contexts/app-context";
import styles from "./Nav.module.scss";

import logo from "../../../public/icons/nav/logo.svg";
import email from "../../../public/icons/nav/email.svg";
import facebook from "../../../public/icons/nav/facebook.svg";
import linkedin from "../../../public/icons/nav/linkedin.svg";
import location from "../../../public/icons/nav/location.svg";
import mobile from "../../../public/icons/nav/mobile.svg";
import twitter from "../../../public/icons/nav/twitter.svg";
import youtube from "../../../public/icons/nav/youtube.svg";

const Nav = () => {
  const { locale } = useRouter();

  const data: any = useContext(AppContext);

  useEffect(() => {
    const handleMouseMove = (event: any) => {
      if (
        (locale === "en" && window.innerWidth - event.clientX < 40) ||
        (locale === "ar" && event.clientX < 20)
      ) {
        showNav();
      }
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => window.removeEventListener("scroll", handleMouseMove);
  }, []);

  return (
    <ClickAwayListener onClickAway={hideNav}>
      <aside id="nav" className={styles.nav}>
        <div className="logo">
          <Link href="/">
            <Image src={logo} alt="" />
          </Link>
        </div>

        <div className="flex col flex-col items-center">
          <Link href={`tel:${data.phone}`}>
            <Image src={mobile} alt="" className="mb-6" />
          </Link>
          <Link href={`mailto:${data.email}`}>
            <Image src={email} alt="" className="mb-6" />
          </Link>
          <Link
            target="_blank"
            rel="noreferrer"
            href="https://www.google.com/maps/place/AlRashid+Residence+Towers/@26.29867,50.177004,13z/data=!4m5!3m4!1s0x0:0xee10cbdb844eafe6!8m2!3d26.2915683!4d50.1777738?hl=en-US"
          >
            <Image src={location} alt="" />
          </Link>
        </div>

        <div className="flex col flex-col items-center">
          <Link href={data.facebook}>
            <Image src={facebook} alt="" className="mb-6" />
          </Link>
          <Link href={data.twitter}>
            <Image src={twitter} alt="" className="mb-6" />
          </Link>
          <Link href={data.linkedin}>
            <Image src={linkedin} alt="" className="mb-6" />
          </Link>
          <Link href={data.youtube}>
            <Image src={youtube} alt="" />
          </Link>
        </div>
      </aside>
    </ClickAwayListener>
  );
};

export default Nav;