Proyectos de Subversion LeadersLinked - SPA

import React, { createContext, useContext } from 'react';
import { Link } from 'react-router-dom';
import { Card, CardContent, CardHeader } from '@shared/components';

const NavigationMenuContext = createContext();

const NavigationMenu = ({
  basePath,
  children,
  showContainer = true,
  containerProps = {},
  className = '',
  title = ''
}) => {
  const contextValue = {
    basePath,
    showContainer,
    containerProps,
    className
  };

  return (
    <NavigationMenuContext.Provider value={contextValue}>
      {showContainer ? (
        <Card {...containerProps}>
          {title && <CardHeader title={title} />}
          <CardContent>
            <div
              className={className}
              style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '0.5rem'
              }}
            >
              {children}
            </div>
          </CardContent>
        </Card>
      ) : (
        <div
          className={className}
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '0.5rem'
          }}
        >
          {children}
        </div>
      )}
    </NavigationMenuContext.Provider>
  );
};

NavigationMenu.Container = ({ children, className = '', style = {} }) => {
  return (
    <div
      className={className}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        ...style
      }}
    >
      {children}
    </div>
  );
};
NavigationMenu.Container.displayName = 'NavigationMenu.Container';

NavigationMenu.Item = ({
  path = '',
  label,
  isActive = false,
  disabled = false,
  style = {},
  linkProps = {},
  children,
  ...rest
}) => {
  const context = useContext(NavigationMenuContext);

  if (!context) {
    throw new Error('NavigationMenu.Item must be used within NavigationMenu');
  }

  const { basePath } = context;
  const displayText = children || label;

  if (disabled) {
    return (
      <span
        style={{
          opacity: 0.5,
          cursor: 'not-allowed',
          ...style
        }}
        {...rest}
      >
        {displayText}
      </span>
    );
  }

  return (
    <Link
      to={`${basePath}${path}`}
      style={{
        fontWeight: isActive ? 'bold' : 'normal',
        textDecoration: 'none',
        color: 'inherit',
        ...style
      }}
      {...linkProps}
      {...rest}
    >
      {displayText}
    </Link>
  );
};
NavigationMenu.Item.displayName = 'NavigationMenu.Item';

NavigationMenu.Divider = ({ style = {}, ...rest }) => {
  return (
    <hr
      style={{
        border: 'none',
        borderTop: '1px solid #e0e0e0',
        margin: '0.25rem 0',
        ...style
      }}
      {...rest}
    />
  );
};
NavigationMenu.Divider.displayName = 'NavigationMenu.Divider';

NavigationMenu.Group = ({ children, style = {}, ...rest }) => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        ...style
      }}
      {...rest}
    >
      {children}
    </div>
  );
};
NavigationMenu.Group.displayName = 'NavigationMenu.Group';

NavigationMenu.fromItems = ({ basePath, items = [], ...props }) => {
  return (
    <NavigationMenu basePath={basePath} {...props}>
      {items.map((item, index) => (
        <NavigationMenu.Item
          key={index}
          path={item.path || item.href || ''}
          label={item.label || item.text || item.title || ''}
          isActive={item.isActive || false}
          disabled={item.disabled || false}
          style={item.style}
          linkProps={item.linkProps}
        />
      ))}
    </NavigationMenu>
  );
};
NavigationMenu.fromItems.displayName = 'NavigationMenu.fromItems';

export { NavigationMenu };