import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { ToggleDarkMode } from '../../Docs/router/screens/Index/components/ToggleDarkMode';

const AppLayoutContainer = ({ children }) => {
  const containerRef = React.useRef();
  const navRef = React.useRef();

  React.useEffect(() => {
    const navbarHt = navRef.current.clientHeight;
    const viewportHt = window.innerHeight;
    containerRef.current.style.height = viewportHt - navbarHt + 'px';
  }, []);

  return (
    <div>
      <nav
        className="flex-grow-0 flex items-center justify-between"
        ref={navRef}
      >
        <div className="logo">
          <h1 className="text-gray-500 ml-4 cursor-pointer text-2xl">
            RPC Docs Site
          </h1>
        </div>
        <div className="flex-grow-0 flex items-center justify-between pr-3">
          <ul className="flex">
            <li>
              <NavLink
                className="text-white mr-4 bg-gray-500 pt-3 p-3 pr-4 pl-4 hover:bg-gray-600 transition-all rounded"
                to="/docs"
              >
                <i className="fas fa-home"></i> Docs
              </NavLink>
            </li>
            <li>
              <NavLink
                className="text-white mr-4 bg-gray-500 pt-3 p-3 pr-4 pl-4 hover:bg-gray-600 transition-all rounded"
                to="/dashboard"
              >
                <i className="fas fa-home"></i> Dashboard
              </NavLink>
            </li>
          </ul>
          <ToggleDarkMode />
        </div>
      </nav>

      <div ref={containerRef}>{children}</div>
    </div>
  );
};

AppLayoutContainer.propTypes = {
  children: PropTypes.element,
};

export { AppLayoutContainer };