import React, { useCallback, useState } from "react";
import { isBrowser } from "react-device-detect";
import { NavLink } from "react-router-dom";
import { useKeycloak } from "@react-keycloak/web";

import Button from "components/Button";
import { AuthStore } from "stores";

const Navbar = () => {
  const [showMenu, setShowMenu] = useState(isBrowser);
  const { keycloak } = useKeycloak();
  const { isAuthenticated, user } = AuthStore.useState();

  const login = useCallback(() => {
    keycloak.login();
  }, [keycloak]);
  const logout = useCallback(() => {
    keycloak.logout();
  }, [keycloak]);

  return (
    <nav className="navbar navbar--simple">
      <div className="container container--wide navbar__content navbar__content--initialized">
        <div className="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
          <NavLink to="/">
            <img
              src={`${process.env.REACT_APP_STYLEGUIDE_URL}/images/logo-round-white.svg`}
              className="w-8"
              alt="Pirátská strana"
            />
          </NavLink>
          <NavLink
            to="/"
            className="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8 hover:no-underline"
          >
            Celostátní fórum 2021
          </NavLink>
        </div>
        <div className="navbar__menutoggle my-4 flex justify-end lg:hidden">
          <button
            onClick={() => setShowMenu(!showMenu)}
            className="no-underline hover:no-underline"
          >
            <i className="ico--menu text-3xl"></i>
          </button>
        </div>
        {showMenu && (
          <>
            <div className="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
              <ul className="navbar-menu text-white">
                <li className="navbar-menu__item">
                  <NavLink className="navbar-menu__link" to="/program">
                    Program
                  </NavLink>
                </li>
              </ul>
            </div>
            <div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
              {!isAuthenticated && (
                <Button className="btn--white" onClick={login}>
                  Přihlásit se
                </Button>
              )}
              {isAuthenticated && (
                <div className="flex items-center space-x-4">
                  <span className="head-heavy-2xs">{user.name}</span>
                  <div className="avatar avatar--2xs">
                    <img
                      src="http://placeimg.com/100/100/people"
                      alt="Avatar"
                    />
                  </div>
                  <button onClick={logout}>
                    <i className="ico--log-out"></i>
                  </button>
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </nav>
  );
};

export default Navbar;