import { Link } from "react-router";
import Logo from "/MAV.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";
import SoundBtn from "./SoundBtn";
import { useIntegrationsContext } from "../../context/IntegrationsContext";

export default function Header() {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const { sessionStarted, sessionPaused } = useIntegrationsContext();

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
      setIsFullscreen(true);
    } else {
      document.exitFullscreen();
      setIsFullscreen(false);
    }
  };

  const refreshBrowser = () => {
    window.location.reload();
  };

  return (
    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto sm:px-3 lg:px-4 py-4 flex flex-col md:flex-row justify-between mb-7 space-y-6 md:space-y-0">
      <div className="w-28">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
      <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
        <div className="flex flex-row lg:flex-row space-x-2">
          {sessionStarted && sessionPaused ? (
            <p className="text-gray-400 font-bold">Session Paused</p>
          ) : (
            sessionStarted && <p className="text-green-400 font-bold">Session Active</p>
          )}
        </div>

        <div className="flex flex-row space-x-8">
          <Link to={"/"}>
            <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
          </Link>
          <div onClick={toggleFullscreen} className="flex flex-col">
            {isFullscreen ? (
              <FontAwesomeIcon icon={faMinimize} size="2x" />
            ) : (
              <FontAwesomeIcon icon={faMaximize} size="2x" />
            )}
          </div>
          <div onClick={refreshBrowser}>
            <FontAwesomeIcon icon={faRotate} size="2x" />
          </div>
          <SoundBtn />
          <Link to={"/session-settings"}>
            <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
          </Link>

          <Link to={"/system-settings"}>
            <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
          </Link>
        </div>
      </div>
    </div>
  );
}