import React, { FC, useContext, useMemo } from 'react';

import { DocumentSizeContext } from '../../context/DocumentSizeContext';
import { ITopNavItem, TopNav } from '../../layout/TopNav';
import {
  NavItemWrapper,
  NavLink,
  NavSubmenu,
  NavSubmenuItem,
  NavSubmenuLabel,
} from '../../layout/TopNav/styles';
import {
  ITopNavCategory,
  ITopNavLink,
  ITopNavLinkItem,
  ITopNavRendererItem,
  ITopNavRendererProps,
  TopNavItemType,
} from './types';

export const TopNavRenderer: FC<ITopNavRendererProps> = ({ items }) => {
  const [documentResizeObserverEntry] = useContext<ResizeObserverEntry[]>(
    DocumentSizeContext,
  );

  const topNavItems = useMemo<ITopNavItem[]>(
    () =>
      items.map(({ item, ...rest }: ITopNavRendererItem) => {
        switch (item.type) {
          case TopNavItemType.Category: {
            const { name, items }: ITopNavCategory = item.value;

            return {
              ...rest,
              element: (
                <NavItemWrapper key={name}>
                  <NavSubmenuLabel>{name}</NavSubmenuLabel>

                  <NavSubmenu>
                    {items.map(
                      ({ value: { label, href } }: ITopNavLinkItem) => (
                        <NavSubmenuItem key={`${label}-${href}`}>
                          <NavLink href={href}>{label}</NavLink>
                        </NavSubmenuItem>
                      ),
                    )}
                  </NavSubmenu>
                </NavItemWrapper>
              ),
            };
          }

          case TopNavItemType.Link: {
            const { label, href }: ITopNavLink = item.value;

            return {
              ...rest,
              element: (
                <NavLink key={`${label}-${href}`} href={href}>
                  {label}
                </NavLink>
              ),
            };
          }
        }
      }),
    [items],
  );

  return (
    <TopNav
      documentWidth={documentResizeObserverEntry?.contentRect?.width ?? 0}
      items={topNavItems}
    />
  );
};