import { useState } from "react";
import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import {
  Sidebar as ProSidebar,
  Menu,
  MenuItem,
  SubMenu,
} from "react-pro-sidebar";
import { FaChevronLeft, FaChevronRight, FaDatabase, FaExclamationCircle } from "react-icons/fa";
import "../Sidebar/Sidebar.css";

const Sidebar = (props) => {
  const [collapsed, setCollapsed] = useState(true);
  const navigate = useNavigate();

  const toggleSidebar = () => {
    setCollapsed(!collapsed);
    if (props.onSidebarToggle) {
      props.onSidebarToggle(!collapsed);
    }
  };

  return (
    <div className="sidebar-wrapper">
      <ProSidebar
        collapsed={collapsed}
        className="app-sidebar"
        backgroundColor="#e8e8e8"
        width="220px"
        collapsedWidth="30px"
      >
        <div className="sidebar-header d-flex justify-content-end px-2 pt-2">
          <button
            className="sidebar-toggle-btn btn btn-link p-0"
            onClick={toggleSidebar}
            title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
          >
            {collapsed ? <FaChevronRight /> : <FaChevronLeft />}
          </button>
        </div>

        <Menu>
          <SubMenu label="Transactions" icon={<FaExclamationCircle />}>
            <MenuItem onClick={() => navigate("/admin/regform")}>
              Regform
            </MenuItem>
            <MenuItem onClick={() => navigate("/admin/error404")}>
              Additional container
            </MenuItem>
          </SubMenu>

          <MenuItem
            icon={<FaDatabase />}
            onClick={() => navigate("/admin/error404")}
          >
            Masters
          </MenuItem>
        </Menu>
      </ProSidebar>
    </div>
  );
};

Sidebar.defaultProps = {
  logo: {},
};

Sidebar.propTypes = {
  logo: PropTypes.object,
  onSidebarToggle: PropTypes.func,
};

export default Sidebar;
