import React from 'react';
import { MegaMenu as MegaMenuUI } from '@nova-hf/ui';
import { MegaMenuColors } from '@nova-hf/ui/umd/ts/src/megamenu/MegaMenu.css';
import { MegaMenuItem } from '@nova-hf/ui/umd/ts/src/megamenu/MenuItem';
import { useMegaMenuCollectionQuery } from 'typings/graphql';

type MegaMenuItems = Omit<MegaMenuItem, 'itemCount'>[] | undefined;

type MegaMenuProps = {
  isOpen: boolean;
};
export const MegaMenu = ({ isOpen }: MegaMenuProps) => {
  const { data, loading, error } = useMegaMenuCollectionQuery();

  if (loading && error && !data) return null;

  if (data && data.megaMenuCollection && data.megaMenuCollection.items.length) {
    const megaMenu = data.megaMenuCollection.items[0];
    const menuItems = megaMenu?.menuItemCollection?.items;

    if (menuItems?.length) {
      const megaMenuItems: MegaMenuItems = menuItems?.map((item) => {
        const color: MegaMenuColors = (item?.color?.color as MegaMenuColors) ?? 'pink';
        return {
          mainLink: {
            title: item?.mainLink?.title ?? '',
            url: item?.mainLink?.url ?? '',
            isActive: false,
            openInNewTab: true,
          },
          color,
          backgroundImage: {
            title: item?.backgroundImage?.title ?? '',
            url: item?.backgroundImage?.url ?? '',
          },
          ...(item?.linksCollection?.items && {
            links: item?.linksCollection?.items.map((link) => ({
              title: link?.title ?? '',
              url: link?.url ?? '',
              isActive: false,
              openInNewTab: true,
            })),
          }),
        };
      });
      return isOpen && <MegaMenuUI zIndex={9000000} menuItems={megaMenuItems} isOpen={isOpen} />;
    }
  }

  return null;
};