import {
  AlignmentFieldType,
  MenuFieldDefaults,
} from '@hubspot/cms-components/fields';
import { PageTreeNode } from '@hubspot/cms-components';
import { CSSProperties, ReactNode } from 'react';

export type MenuOrientation = 'horizontal' | 'vertical';

export type MenuItem = MenuDataItem;

export type MenuRenderProps = {
  orientation?: MenuOrientation;
  alignment?: AlignmentFieldType['default'];
  maxDepth?: number;
  ariaLabel?: string;
  variant?: 'primary' | 'secondary';
  className?: string;
  style?: CSSProperties;
};

export type MenuProps = MenuRenderProps & {
  menuId?: string;
  items?: MenuItem[];
  children?: MenuItem[];
};

export type ContentFieldsProps = {
  menuLabel?: string;
  menuName?: string;
  menuDefault?: typeof MenuFieldDefaults;
};

export type StyleFieldsProps = {
  orientationLabel?: string;
  orientationName?: string;
  orientationDefault?: MenuOrientation;
};

export interface MenuProviderProps {
  maxDepth?: number;
  children: ReactNode;
  useDummyData?: boolean;
}

export type MenuDataItem = PageTreeNode;

export type EnrichedMenuDataItem = MenuDataItem & {
  _id: string;
};

export interface MenuContextValue {
  maxDepth?: number;
  orientation?: 'horizontal' | 'vertical';
  children?: EnrichedMenuDataItem[];
}
