import { ChevronRight, Bell, HelpCircle } from 'lucide-react';
import './BreadCrumb.scss';
import { selectUser } from '../redux/slices/userSlice';
import { useSelector } from 'react-redux';
import { useNavigate, useLocation } from 'react-router-dom';
import ProfileDropdown from './ProfileDropdown';
import { useEffect, useState } from 'react';

const BreadCrumb = ({ items, showUser = false }) => {
  const user = useSelector(selectUser);
  const navigate = useNavigate();
  const location = useLocation();

  const handleNavigate = (path) => {
    if (location.pathname !== path) {
      navigate(path);
    }
  };

  const [isMobile, setIsMobile] = useState(window.innerWidth < 576);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 576);
    };

    window.addEventListener("resize", handleResize);

    // run once on mount
    handleResize();

    return () => window.removeEventListener("resize", handleResize);
  }, []);


  const activeLabel = items.find(item => item.active)?.label || '';

  return (
    <div className='breadcrumb'>
      <div className='breadcrumb__mobile-header'>
        <div className="breadcrumb__mobile-spacer"></div>
        <div className="breadcrumb__mobile-title">{activeLabel}</div>
        <div className="breadcrumb__actions">
          <button
            className="breadcrumb__action-button"
            aria-label="Help"
          >
            <HelpCircle className="breadcrumb__action-icon" />
          </button>

          <button
            className="breadcrumb__action-button breadcrumb__action-button--notification"
            aria-label="Notifications"
          >
            <Bell className="breadcrumb__action-icon" />
            <span className="breadcrumb__notification-badge" />
          </button>
        </div>
      </div>

      <div className='breadcrumb__divider' />

      <div className="breadcrumb__content">
        <nav className='breadcrumb__navigation' aria-label="Breadcrumb">
          {items.map((item, index) => (
            <div key={index} className="breadcrumb__nav-segment">
              <div
                className={`breadcrumb__item ${item.active ? 'breadcrumb__item--active' : ''}`}
                onClick={() => handleNavigate(item.path)}
                style={{ cursor: location.pathname !== item.path ? 'pointer' : 'default' }}
              >
                {item.icon}
                <span className="breadcrumb__item-label">{item.label}</span>
              </div>
              {index < items.length - 1 && (
                <ChevronRight className="breadcrumb__separator" />
              )}
            </div>
          ))}
        </nav>
        {showUser && <ProfileDropdown top={isMobile ? 'top-27.5' : false} />}
      </div>
    </div>
  );
};

export default BreadCrumb;