import { useMemo } from 'react';
import MenuItem from '../../MenuItem/index.js';
import { VerticalMenuProps } from '../types.js';
import { addIdsToMenuItems } from '../../utils/transformMenuData.js';
import styles from './index.module.scss';
import cx from '../../../utils/classname.js';
const VerticalMenu = ({
  maxDepth,
  className = '',
  style = {},
  linkColor,
  linkColorHover,
  backgroundColor,
  backgroundColorHover,
  submenuLinkColor,
  submenuLinkColorHover,
  submenuBackgroundColor,
  submenuBackgroundColorHover,
  indentation,
  menuData,
}: VerticalMenuProps) => {
  if (!menuData?.pagesTree?.children) return null;

  const menuItems = useMemo(
    () => addIdsToMenuItems(menuData.pagesTree.children),
    [menuData]
  );
  const level = 1;

  const cssVariables = {
    ...(linkColor && { '--hscl-verticalMenu-color': linkColor }),
    ...(linkColorHover && {
      '--hscl-verticalMenu-color-hover': linkColorHover,
    }),
    ...(backgroundColor && {
      '--hscl-verticalMenu-backgroundColor': backgroundColor,
    }),
    ...(backgroundColorHover && {
      '--hscl-verticalMenu-backgroundColor-hover': backgroundColorHover,
    }),
    ...(submenuLinkColor && {
      '--hscl-verticalMenu-submenu-color': submenuLinkColor,
    }),
    ...(submenuLinkColorHover && {
      '--hscl-verticalMenu-submenu-color-hover': submenuLinkColorHover,
    }),
    ...(submenuBackgroundColor && {
      '--hscl-verticalMenu-submenu-backgroundColor': submenuBackgroundColor,
    }),
    ...(submenuBackgroundColorHover && {
      '--hscl-verticalMenu-submenu-backgroundColor-hover':
        submenuBackgroundColorHover,
    }),
    ...(indentation && {
      '--hscl-verticalMenu-paddingInlineStart': indentation,
    }),
  };

  return (
    <nav
      className={cx(styles.verticalMenu, className)}
      style={{ ...cssVariables, ...style }}
    >
      <ul className={styles.menuList}>
        {menuItems.map(item => (
          <MenuItem
            key={item._id}
            item={item}
            level={level}
            maxDepth={maxDepth}
          />
        ))}
      </ul>
    </nav>
  );
};

export default VerticalMenu;
