import React, { useState } from 'react';
import { Nav, Button, Collapse, Form, InputGroup } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import logo from '../../../assets/images/logo.png'

const AdminSideNav = () => {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  const [open3, setOpen3] = useState(false);

  const [isMinimized, setIsMinimized] = useState(false);

  const toggleMinimize = () => {
    setIsMinimized(!isMinimized);
    if (!isMinimized) {
      setOpen1(false);
      setOpen2(false);
      setOpen3(false);
    }
  };

  return (
    <nav id="sidebarMenu" className={`col-md-3 col-lg-2 sticky-top d-md-block bg-white shadow-end sidebar sidebar-admin ${isMinimized ? 'minimized' : ''}`}>
      {/* <Button variant='white-outline-blue' className="toggle-sidebar" onClick={toggleMinimize}>
        <i className="chrevon bi bi-chevron-double-left"></i>
      </Button> */}
      <div className="position-sticky">
        <div className="d-flex justify-content-between align-items-center top-logo">
          <img src={logo} alt="" />
          <i className="bi bi-caret-left-square text-grey cursor-pointer" onClick={toggleMinimize}></i>
        </div>
        {/* <Form.Control className='rounded rounded-35'
          type="text"
          aria-describedby="searchData"
          placeholder='search'
        /> */}
        <InputGroup className="rounded rounded-35">
          <InputGroup.Text id="basic-addon1" onClick={isMinimized ? toggleMinimize : () => {}}>
            <i className="chrevon bi bi-search"></i>
          </InputGroup.Text>
          <Form.Control
            placeholder="Search"
            aria-label="Username"
            aria-describedby="basic-addon1"
          />
        </InputGroup>
        <Nav className="nav-container flex-column">
          <div className="menu-box">
            <Nav.Link as={NavLink} to="/admin/dashboard" className="rounded rounded-35">
              <i className="bi bi-house me-2"></i>  
              <span className='text-truncate'>Home</span>
            </Nav.Link>
            <>
              <Nav.Link
                className={`drop-menu rounded rounded-35 d-flex justify-content-between align-items-center ${open1 ? `active-border` : ` `}`}
                onClick={() => { 
                  if (isMinimized) { 
                    toggleMinimize(); 
                    setOpen1(!open1); 
                  } else{
                    setOpen1(!open1); 
                  }
                }}
              >
                <div className={`w-100 d-flex align-items-center ${isMinimized ? `justify-content-center` : `justify-content-start`}`}>
                  <i className="bi bi-briefcase me-2"></i>
                  <span className='text-truncate'>Academic</span>
                </div>
                {open1 ? <i className="chrevon bi bi-chevron-up"></i> : <i className="chrevon bi bi-chevron-down"></i>}
              </Nav.Link>
              <Collapse className='submenu' in={open1}>
                <div>
                  <Nav.Link as={NavLink} to="student" className="rounded rounded-35">Students</Nav.Link>
                  <Nav.Link as={NavLink} to="teacher" className="rounded rounded-35">Teachers</Nav.Link>
                  <Nav.Link as={NavLink} to="class" className="rounded rounded-35">Classes</Nav.Link>
                </div>
              </Collapse>
            </>
            <>
              <Nav.Link
                className={`drop-menu rounded rounded-35 d-flex justify-content-between align-items-center ${open2 ? `active-border` : ` `}`}
                onClick={() => { 
                  if (isMinimized) { 
                    toggleMinimize(); 
                    setOpen2(!open2); 
                  } else{
                    setOpen2(!open2); 
                  }
                }}
              >
                <div className={`w-100 d-flex align-items-center ${isMinimized ? `justify-content-center` : `justify-content-start`}`}>
                  <i className="bi bi-journal-bookmark me-2"></i>
                  <span className='text-truncate'>Learning</span>
                </div>
                {open2 ? <i className="chrevon bi bi-chevron-up"></i> : <i className="chrevon bi bi-chevron-down"></i>}
              </Nav.Link>
              <Collapse className='submenu' in={open2}>
                <div>
                  <Nav.Link as={NavLink} to="section" className="rounded rounded-35">Sections</Nav.Link>
                  <Nav.Link as={NavLink} to="topic" className="rounded rounded-35">Topics</Nav.Link>
                  <Nav.Link as={NavLink} to="material" className="rounded rounded-35">Materials</Nav.Link>
                  <Nav.Link as={NavLink} to="exercise" className="rounded rounded-35">Exercises</Nav.Link>
                </div>
              </Collapse>
            </>
            <>
              <Nav.Link
                className={`drop-menu rounded rounded-35 d-flex justify-content-between align-items-center ${open3 ? `active-border` : ` `}`}
                onClick={() => { 
                  if (isMinimized) { 
                    toggleMinimize(); 
                    setOpen3(!open3); 
                  } else{
                    setOpen3(!open3); 
                  }
                }}
              >
                <div className={`w-100 d-flex align-items-center ${isMinimized ? `justify-content-center` : `justify-content-start`}`}>
                  <i className="bi bi-check2-circle me-2"></i>
                  <span className='text-truncate'>Monitoring</span>
                </div>
                {open3 ? <i className="chrevon bi bi-chevron-up"></i> : <i className="chrevon bi bi-chevron-down"></i>}
              </Nav.Link>
              <Collapse className='submenu' in={open3}>
                <div>
                  <Nav.Link as={NavLink} to="learning-progress" className="rounded rounded-35">Learning Progress</Nav.Link>
                  <Nav.Link as={NavLink} to="report" className="rounded rounded-35">Issue Report</Nav.Link>
                </div>
              </Collapse>
            </>
          </div>
          <div className='setting-box'>
            <Nav.Link as={NavLink} to="/admin/profile" className="rounded rounded-35">
              <i className="bi bi-gear me-2"></i>  
              <span className='text-truncate'>Settings</span>
            </Nav.Link>
          </div>
        </Nav>
      </div>
    </nav>
  );
};

export default AdminSideNav;