import React from "react";
import Dropdown from "./Dropdown";
import DropDown from "./Drop";
import Link from "./Link";
import Logo from "./Logo";
import Logofreeland from "./Logofreeland";
import { useState, useEffect } from "react";
import { Button } from "./Button/Button";
import Bell from "./Bell";
import Avatar from "./Avatar";
import ContextMenu from "components/containers/contextmenu/ContextMenu";
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
import Sidebar from "components/Sidebar";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Createnew, About, Mylibrary } from "components/pages/Overview";
import Navbar from "./Navbar";
import Drop from "./Drop";

// Icons Start -------------------------------------------
import { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg";
// Icons End -------------------------------------------

// width and height
let Short: boolean;
function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;

  if (width > 870) {
    Short = true;
  } else {
    Short = false;
  }
  return {
    width,
    height,
  };
}

export function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}
// width and height End

const Header1 = () => {
  const [selected, setSelected] = useState("MY LIBRARY");
  const [selectedB, setSelectedB] = useState("About");
  const { height, width } = useWindowDimensions();
  return (
    <header
      className="header flex justify-between items-center  box-border w-full 
                border border-gray-75  
                h-16 
                px-4
                gap-20
                lg:gap-40 lg:px-8
                xl:gap-60 xl:px-16"
    >
      {/* Logo and Menu */}
      <div className="flex gap-8 xl:gap-x-16">
        {/* Logo */}
        <a className="Logo flex items-center gap-2 " href="/">
          <Logo className=" w-10  " />
          <Logofreeland className="w-28" />
        </a>

        {/* Menu( Create new - My library - About ) Start */}
        {Short && (
          <div
            className="Menu flex items-center
             gap-2"
          >
            <Link className="text-blue-500 px-4 font-bold" href="#">
              CREATE NEW
            </Link>

            {/* Dropdown start */}
            <ContextMenu button="MY LIBRARY" className="text-white">
              <ContextMenuAction
                caption="My publications"
                action={() => console.log("My publications")}
                icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
              ></ContextMenuAction>
              <ContextMenuAction
                caption="My favorites"
                action={() => console.log("My favorites")}
                icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
              ></ContextMenuAction>
            </ContextMenu>
            {/* Dropdown End */}

            {/* Dropdown start */}
            <ContextMenu button="MY LIBRARY" className="text-white">
              <ContextMenuAction
                caption="My publications"
                action={() => console.log("My publications")}
                icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
              ></ContextMenuAction>
              <ContextMenuAction
                caption="My favorites"
                action={() => console.log("My favorites")}
                icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
              ></ContextMenuAction>
            </ContextMenu>
            {/* Dropdown End */}
          </div>
        )}

        {/* Menu( Create new - My library - About ) End */}
      </div>
      <div className="Authentication flex items-center font-bold text-sm gap-4 ">
        {/* -------------------------------------- */}
        {/* Buttons Start */}
        {/* <Button emphasis="low" className="text-xs px-1 md:text-sm lg:px-4">
          Sign In
        </Button>
        <Button
          emphasis="medium"
          className="text-xs px-1 
                      md:text-sm 
                      lg:px-4"
        >
          Sign Up
        </Button> */}
        {/* Buttons End */}
        {/* -------------------------------------- */}

        {/* Bell Start */}
        <button>
          <Bell className="h-6 w-6" />
        </button>
        {/* Bell End */}

        {/* Avatar Start */}
        {Short && (
          <button>
            <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
          </button>
        )}
        {/* Avatar End */}

        {/* Burger Start */}
        {!Short && (
          <button>
            <Navbar />
          </button>
        )}
        {/* Burger End */}
      </div>
    </header>
  );
};

export default Header1;
