import { useNavigate, Link } from "react-router-dom";
import { removeCurrentUser,getCurrentUser } from "../../utils/tokenService";
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import {
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown,
  DropdownToggle,
  Form,
  FormGroup,
  InputGroupAddon,
  InputGroupText,
  Input,
  InputGroup,
  Navbar,
  Nav,
  Media,
} from "reactstrap";
import "./AdminNavbar.css";
import "bootstrap-icons/font/bootstrap-icons.css";

const AdminNavbar = ({ brandText }) => {
  const[currentUser,setCurrentUser]=useState();
  useEffect(() => {
    const user = getCurrentUser();
    console.log(user);
    setCurrentUser(user);
    console.log(currentUser);
    if (!user) {
      navigate("/login");
    }
  }, []);

  console.log(brandText);
  const navigate = useNavigate();

  const handleLogout = () => {
    removeCurrentUser();
    // localStorage.removeItem("authToken"); // Uncomment if needed
    navigate("/login");
  };

  return (
    <Navbar className="navbar-top navbar-dark" expand="lg" id="navbar-main">
      <div className="navbar-container container-fluid">
        {/* Brand */}
        <Link className="brand_name h4 mb-0 text-white text-uppercase" to="/">
          {brandText}
        </Link>

        {/* Navigation Icons */}
        <div className="nav-icons d-flex align-items-center">
          <Link to="/admin/index" className="nav-icon">
            <i className="fas fa-home" />
          </Link>
          <Link to="/admin/setting" className="nav-icon">
            <i className="ni ni-settings-gear-65" />
          </Link>
          <Link to="/admin/dashboard-runner-all" className="nav-icon">
            <i className="bi bi-grid" />
          </Link>
          <Link to="/admin/report-runner" className="nav-icon">
            <i className="ni ni-chart-bar-32" />
          </Link>
          <Link to="/admin/user-report" className="nav-icon">
            <i className="ni ni-grid" />
          </Link>
        </div>

        {/* Search and Profile */}
        <div className="nav-right d-flex align-items-center">
          <Form className="navbar-search navbar-search-dark form-inline">
            {/* <FormGroup className="mb-0">
              <InputGroup className="input-group-alternative search-input-group">
                <InputGroupAddon addonType="prepend">
                  <InputGroupText className="search-icon">
                    <i className="fas fa-search" />
                  </InputGroupText>
                </InputGroupAddon>
                <Input placeholder="Search" type="text" className="search-input" />
              </InputGroup>
            </FormGroup> */}
          </Form>

          <Nav className="align-items-center" navbar>
            <UncontrolledDropdown nav>
              <DropdownToggle className="pr-0" nav>
                <Media className="align-items-center">
                  <span className="avatar avatar-sm rounded-circle">
                    {/* <img
                      alt="Profile"
                      src={require("../../assets/img/theme/team-4-800x800.jpg")}
                    /> */}
                    <FontAwesomeIcon icon={faUser} />
                  </span>
                  <Media className="ml-2 d-none d-lg-block">
                    <span className="brand_name mb-0 text-sm font-weight-bold text-white-50">
                      {currentUser ? currentUser.fullname : "Guest"}
                    </span>
                  </Media>
                </Media>
              </DropdownToggle>
              <DropdownMenu className="dropdown-menu-arrow" right>
                <DropdownItem className="noti-title" header tag="div">
                  <h6 className="text-overflow m-0">Welcome!</h6>
                </DropdownItem>
                <DropdownItem to="/admin/user-profile" tag={Link}>
                  <i className="ni ni-single-02" />
                  <span>My profile</span>
                </DropdownItem>
                <DropdownItem to="/admin/user-profile" tag={Link}>
                  <i className="ni ni-settings-gear-65" />
                  <span>Settings</span>
                </DropdownItem>
                <DropdownItem to="/admin/user-profile" tag={Link}>
                  <i className="ni ni-calendar-grid-58" />
                  <span>Activity</span>
                </DropdownItem>
                <DropdownItem to="/admin/user-profile" tag={Link}>
                  <i className="ni ni-support-16" />
                  <span>Support</span>
                </DropdownItem>
                <DropdownItem divider />
                <DropdownItem onClick={handleLogout}>
                  <i className="ni ni-user-run" />
                  <span>Logout</span>
                </DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
        </div>
      </div>
    </Navbar>
  );
};

export default AdminNavbar;