import React, { useState } from 'react';
import { Navbar, Container, Nav, SplitButton, Dropdown, ButtonGroup, Button, Modal } from 'react-bootstrap';
import logo from '../../../assets/images/logo-w.png';
import logoutIllustration from '../../../assets/images/illustration/logout.png';
import { Link } from 'react-router-dom';
import useAuth from '../../../roles/guest/auth/hooks/useAuth';
import { MEDIA_URL } from '../../../utils/Constant';
import avatar from '../../../assets/images/default-avatar.jpg';

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

function getDateNow() {
  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];

  const now = new Date();
  const dayName = days[now.getDay()];
  const day = String(now.getDate()).padStart(2, '0')
  const monthName = months[now.getMonth()];
  const year = now.getFullYear();

  return `${dayName}, ${day} ${monthName} ${year}`;
}


const AdminNavbar = () => {
  const { logout } = useAuth();
  const { username, picture } = JSON.parse(localStorage.getItem('userData'));

  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const handleLogout = () => {
    logout();
  };

  return (
    <Navbar bg="ts" className='border-bottom'>
      
      <Navbar.Brand href="#" className='px-4 d-flex items-center'>
        <div>
          <span className='fw-bold text-navy'>{getDateNow()}</span>
          <span className='fw-light text-grey'>CMS Smart English Adaptive Learning System</span>
        </div>
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="navbar-nav" />
      <Navbar.Collapse id="navbar-nav">
        <Dropdown as={ButtonGroup} align='end' className='ms-auto me-4 rounded rounded-35'>
          <Button variant="white" className='d-flex'>
            {/* <i className="me-2 bi bi-person-circle"></i> */}
            <img src={picture ? `${MEDIA_URL}/avatar/${picture}` :  avatar} alt="profile" 
              style={{
                objectFit:"cover",
                height:"24px",
                width:"24px",
                borderRadius:"100%"
              }}
              className='me-2'
            /> 
            <span className='truncate text-start' style={{maxWidth:"112px"}}>{validName(username)}</span>
          </Button>

          <Dropdown.Toggle split variant="white" className='border-start' id="dropdown-split-basic" />

          <Dropdown.Menu>
            <Dropdown.Item as={Link} to={'/admin/profile'}>Profile</Dropdown.Item>
            <Dropdown.Item onClick={handleShow}>Logout</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Navbar.Collapse>

      <Modal show={show} onHide={handleClose} centered>
        <Modal.Body className='p-4 d-flex flex-column items-center'>
          <h4 className='mb-4 fw-bold text-dark'>Time to <span className='text-red'>logout</span>?</h4>
          <img src={logoutIllustration} alt="" />
          <p className='my-3 text-muted fw-light'>Confirm logout? We’ll be here when you return.</p>
          <div className="mt-4 w-100 d-flex justify-content-center">
            <Button variant="outline-muted" className="py-2 px-5 mx-1 rounded-35" onClick={handleClose}>No, I'll stay</Button>
            <Button variant="red" className="py-2 px-5 mx-1 rounded-35" onClick={handleLogout}>Yes, I'm done</Button>
          </div>
        </Modal.Body>
      </Modal>

    </Navbar>
  );
};

export default AdminNavbar;
