import React, { useState } from 'react';
import { Nav, Button } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import avatar from '../../../assets/images/default-avatar.jpg';
import { API_URL } from '../../../utils/Constant';

function validName(fullName) {
  const nameArray = fullName.split(" ");
  const firstTwoWords = nameArray.slice(0, 2).join(" ");
  
  return firstTwoWords;
}

const UserSideNav = () => {
  const { username, picture } = JSON.parse(localStorage.getItem('userData'));
  
  const [isMinimized, setIsMinimized] = useState(false);
  const toggleMinimize = () => {
    setIsMinimized(!isMinimized);
  };

  return (
    <nav id="sidebarMenu" className={`col-md-3 col-lg-2 sticky-top d-none d-md-block bg-blue sidebar ${isMinimized ? 'minimized' : ''}`}>
      <Button variant='white-outline-blue' className="toggle-sidebar" onClick={toggleMinimize}>
        <i className="bi bi-chevron-double-left"></i>
      </Button>
      <div className="position-sticky pt-4">
        <div className="d-flex flex-column items-center mb-3 border-bottom">
          <img src={picture ? `${API_URL}/uploads/avatar/${picture}` :  avatar} alt="" 
            className="img-avatar" 
            height={72} width={72}
            style={{objectFit:'cover'}} 
          />
          <h6 className='display-username text-white text-center truncate truncate-2 my-3'>{validName(username)}</h6>
        </div>
        <Nav className="flex-column">
          <Nav.Link as={NavLink} to="home" className="mb-2 text-white rounded">
            <i className="bi bi-house me-2"></i>
            <span className='text-truncate'>Home</span>
          </Nav.Link>
          <Nav.Link as={NavLink} to="module" className="mb-2 text-white rounded">
            <i className="bi bi-book-half me-2"></i>
            <span className='text-truncate'>Learning</span>
          </Nav.Link>
          <Nav.Link as={NavLink} to="history" className="mb-2 text-white rounded">
            <i className="bi bi-clock-history me-2"></i>
            <span className='text-truncate'>History</span>
          </Nav.Link>
          <Nav.Link as={NavLink} to="setting" className="mb-2 text-white rounded">
            <i className="bi bi-gear-fill me-2"></i>
            <span className='text-truncate'>Setting</span>
          </Nav.Link>
        </Nav>
      </div>
    </nav>
  );
};

export default UserSideNav;