Build a navigation menu using the SDK

/**
 * Fetches all categories from commercetools using cursor-based pagination.
 * @returns {Promise<Category[]>} A promise that resolves to an array of all Category objects.
 */
async function getAllCategories(): Promise<Category[]> {
  const limit = 40;
  let lastId: string | undefined = undefined; // Start without a specific lastId for the first query
  const allCategories: Category[] = [];
  let hasMore = true;
  // Removed: let page = 1;

  console.log('Starting category fetch...');

  while (hasMore) {
    try {
      // Removed page number from log
      console.log(
        `Fetching next batch (limit: ${limit}, starting after ID: ${
          lastId ?? 'beginning'
        })`
      );
      // Type the response for clarity
      const response: ClientResponse<CategoryPagedQueryResponse> = await apiRoot
        .categories()
        .get({
          queryArgs: {
            limit: limit,
            sort: 'id asc', // Keep sorting by ID for pagination consistency
            withTotal: false,
            // Use where clause for cursor pagination: id > lastId
            // Only add the 'where' clause if lastId is defined
            ...(lastId && { where: `id > "${lastId}"` }),
            // Add other filters here if necessary
            // Example: where: `id > "${lastId}" and published = true`
          },
        })
        .execute();

      const results: Category[] = response.body.results;

      if (results.length > 0) {
        // Use push with spread operator for potentially better performance/readability
        allCategories.push(...results);

        // Update lastId with the ID of the *last* category fetched in this batch
        lastId = results[results.length - 1].id;
        hasMore = results.length === limit; // Continue if we received a full page
        // Removed page number and page increment from log
        console.log(
          `Fetched ${results.length} categories this batch. Total so far: ${allCategories.length}. Next batch starts after ID: ${lastId}`
        );
        // Removed: page++;
      } else {
        hasMore = false; // No more results found
        console.log('No more categories found in the last query.');
      }
    } catch (error: unknown) {
      // Type error as unknown
      // Basic error logging, consider more robust error handling/reporting
      // Removed page number from error log
      console.error(
        `Error fetching categories batch:`,
        error instanceof Error ? error.message : error
      );
      hasMore = false; // Stop fetching on error
      // Optionally re-throw or handle the error differently
      // throw new Error(`Failed to fetch categories: ${error instanceof Error ? error.message : String(error)}`);
    }
  }

  console.log(
    `Finished fetching. Total categories retrieved: ${allCategories.length}.`
  );
  return allCategories;
}

// --- Define the structure for the optimized menu item ---
// Added orderHint to facilitate sorting
interface MegaMenuItem {
  id: string;
  name: LocalizedString; // Keep the full localized object
  slug: LocalizedString; // Keep the full localized object
  orderHint: string; // Store the original orderHint (it's always a string in CT)
  children: MegaMenuItem[];
}

/**
 * Comparison function for MegaMenuItems based on orderHint.
 * Tries to compare numerically, falls back for non-numeric strings.
 * Puts items with non-numeric or missing orderHints at the end.
 * @param {MegaMenuItem} a - First item to compare.
 * @param {MegaMenuItem} b - Second item to compare.
 * @returns {number} Negative if a < b, positive if a > b, 0 if equal.
 */
function compareMenuItemsByOrderHint(a: MegaMenuItem, b: MegaMenuItem): number {
  const fallbackValue = Infinity; // Use Infinity to push non-numeric/missing hints to the end

  const parseHint = (hint: string | undefined | null): number => {
    // Treat null, undefined, or empty string as needing the fallback
    if (hint == null || hint === '') return fallbackValue;
    const num = parseFloat(hint);
    // If parseFloat results in NaN, use the fallback value
    return isNaN(num) ? fallbackValue : num;
  };

  const aValue = parseHint(a.orderHint);
  const bValue = parseHint(b.orderHint);

  // Primary sort: by parsed orderHint value
  if (aValue !== bValue) {
    return aValue - bValue;
  }

  // Optional Secondary sort (for stability when orderHints are equal or non-numeric):
  // You could sort by name or ID here if needed. Let's use ID for determinism.
  if (a.id < b.id) return -1;
  if (a.id > b.id) return 1;
  return 0; // Should only happen if IDs are identical (unlikely)
}

/**
 * Builds a hierarchical tree structure from a flat list of categories,
 * sorting siblings by orderHint.
 * @param {Category[]} categories - A flat array of Category objects.
 * @returns {MegaMenuItem[]} An array of root-level MegaMenuItem objects, each potentially containing children, sorted by orderHint.
 */
function buildCategoryTree(categories: Category[]): MegaMenuItem[] {
  // Use Record for a typed key-value map
  const categoryMap: Record<string, MegaMenuItem> = {};
  const rootCategories: MegaMenuItem[] = [];
  const processedIds = new Set<string>(); // Keep track of IDs already added to the tree structure

  console.log('Building category tree...');

  // 1. Create a map of ID -> optimized category object (MegaMenuItem) including orderHint
  categories.forEach((category: Category) => {
    categoryMap[category.id] = {
      id: category.id,
      name: category.name,
      slug: category.slug,
      orderHint: category.orderHint, // Store the orderHint
      children: [],
    };
  });

  // 2. Build the tree structure by assigning children to their parents
  categories.forEach((category: Category) => {
    if (processedIds.has(category.id)) {
      return; // Skip already processed
    }

    const optimizedCategory = categoryMap[category.id];
    if (!optimizedCategory) {
      console.error(
        `Consistency error: Category ${category.id} not found in map during tree build.`
      );
      return;
    }

    if (!category.parent) {
      rootCategories.push(optimizedCategory);
      processedIds.add(category.id);
    } else {
      const parentId = category.parent.id;
      const parentNode = categoryMap[parentId];

      if (parentNode) {
        parentNode.children.push(optimizedCategory);
        processedIds.add(category.id);
      } else {
        console.warn(
          `Parent category with ID ${parentId} not found in the fetched list for child category ${
            category.id
          } (${category.name?.['en'] ?? 'N/A'}). Adding child as a root node.`
        );
        rootCategories.push(optimizedCategory);
        processedIds.add(category.id);
      }
    }
  });

  // 3. Sort children within each node *after* the tree is built
  console.log('Sorting children within each category node by orderHint...');
  Object.values(categoryMap).forEach((node) => {
    if (node.children.length > 1) {
      // Sort the children array in place
      node.children.sort(compareMenuItemsByOrderHint);
    }
  });

  // 4. Sort the root categories *after* the tree is built
  console.log('Sorting root categories by orderHint...');
  if (rootCategories.length > 1) {
    // Sort the root array in place
    rootCategories.sort(compareMenuItemsByOrderHint);
  }

  console.log(
    `Category tree built and sorted. Found ${
      rootCategories.length
    } root categories. Total nodes processed: ${processedIds.size}.`
  );

  const uniqueInputIds = new Set(categories.map((c) => c.id)).size;
  if (processedIds.size !== uniqueInputIds) {
    console.warn(
      `Mismatch between processed nodes (${processedIds.size}) and unique input IDs (${uniqueInputIds}). This might indicate issues with duplicate handling or orphaned categories.`
    );
  }

  return rootCategories;
}

/**
 * Main function to fetch all categories, process them into a sorted tree structure,
 * and return the result.
 * @returns {Promise<MegaMenuItem[]>} A promise resolving to the sorted category tree structure.
 */
export async function getAndProcessMegaMenuCategories(): Promise<
  MegaMenuItem[]
> {
  try {
    const allCategories: Category[] = await getAllCategories();

    if (allCategories.length === 0) {
      console.log('No categories found or fetched.');
      return [];
    }

    const categoryTree: MegaMenuItem[] = buildCategoryTree(allCategories);

    console.log(
      'Successfully processed categories into sorted mega menu structure.'
    );
    return categoryTree;
  } catch (error) {
    console.error(
      'An error occurred during the category processing pipeline:',
      error
    );
    return [];
    // Or: throw error;
  }
}

// --- Example Usage ---
async function run() {
  console.log('Starting category processing for mega menu...');
  const megaMenuData = await getAndProcessMegaMenuCategories();

  if (megaMenuData.length > 0) {
    console.log(
      `Successfully generated sorted mega menu data with ${megaMenuData.length} root items.`
    );
    // Log the *entire* generated structure
    console.log('--- Start Full Generated Structure ---');
    console.log(JSON.stringify(megaMenuData, null, 2)); // Stringify the whole array with pretty printing
    console.log('--- End Full Generated Structure ---');
  } else {
    console.log(
      'Mega menu data generation resulted in an empty or failed structure.'
    );
  }
}

run().catch((err) => {
  console.error('Unhandled error in run:', err);
});

{
  "key": "category-menu-display-type",
  "name": {
    "en": "Category Menu Display Flag"
  },
  "description": {
    "en": "Defines a boolean flag for Categories to control their visibility in frontend menus."
  },
  "resourceTypeIds": ["category"],
  "fieldDefinitions": [
    {
      "name": "isMenuDisplayed",
      "label": {
        "en": "Show in Menu"
      },
      "required": false,
      "type": {
        "name": "Boolean"
      },
      "inputHint": "SingleLine"
    }
  ]
}

const response: ClientResponse<CategoryPagedQueryResponse> = await apiRoot
  .categories()
  .get({
    queryArgs: {
      limit: limit,
      sort: 'id asc',
      withTotal: false,
      where: `id > "${lastId} " and custom(fields(isMenuDisplayed=true))`,
      // Add other filters here if necessary
    },
  })
  .execute();

{
  "key": "category-boolean-enum-type",
  "name": {
    "en": "Boolean and Enum Custom Fields for Categories"
  },
  "description": {
    "en": "Defines a boolean flag for Categories and an enum for the website"
  },
  "resourceTypeIds": ["category"],
  "fieldDefinitions": [
    {
      "name": "isMenuDisplayed",
      "label": {
        "en": "Show in Menu"
      },
      "required": false,
      "type": {
        "name": "Boolean"
      }
    },
    {
      "name": "website",
      "label": {
        "en": "The website that the Category belongs to"
      },
      "required": false,
      "type": {
        "name": "Enum",
        "values": [
          {
            "key": "electronics-high-tech",
            "label": "Electronics High Tech"
          },
          {
            "key": "zenith-living",
            "label": "Zenith Living"
          }
        ]
      }
    }
  ]
}

{
  "version": 1,
  "actions": [
    {
      "action": "addFieldDefinition",
      "fieldDefinition": {
        "name": "website",
        "label": {
          "en": "The website that they Category belongs to"
        },
        "required": false,
        "type": {
          "name": "Enum",
          "values": [
            {
              "key": "electronics-high-tech",
              "label": "Electronics High Tech"
            },
            {
              "key": "zenith-living",
              "label": "Zenith Living"
            }
          ]
        }
      }
    }
  ]
}

where: `id > "${lastId} " and custom(fields(isMenuDisplayed=true and website="electronics-high-tech"))`

const response: ClientResponse<CategoryPagedQueryResponse> = await apiRoot
  .categories()
  .get({
    queryArgs: {
      limit: limit,
      sort: 'id asc',
      withTotal: false,
      where: `id > "${lastId} " and custom(fields(isMenuDisplayed=true and website="electronics-high-tech"))`,
    },
  })
  .execute();

/**
* Make a REST API call to get Categories from Composable Commerce
* @param methodArgs
*/
protected async getCommercetoolsCategoriesResponse(methodArgs: object) {
   return await apiRoot
     .categories() // Use the Category REST endpoint
     .get(methodArgs) // GET request passing the method arguments
     .execute() // Execute the request
     .catch((error) => {
// TODO Implement error handling strategy. For example, handle or rethrow the error
     });
 }

/**
* Make a GraphQL API call to get Categories Composable Commerce
* @param query  GraphQL query
*/
protected async getCommercetoolsCategoryPagedQueryResponseUsingGraphQL(query: string) {
   return await apiRoot
   .graphql() // Use the GraphQL API
   .post({body: {query}}) // GraphQL uses a POST request. Pass the query in the body
   .execute()// Execute the request
   .catch((error: any) => {
	  // TODO Implement error handling strategy. For example, handle or rethrow the error
   });
}

/**
 * Retrieve an array of all Categories, sorted by their `orderHint` value
 * @param limit The maximum number of Categories to retrieve per page (default 20, max 500).
 * @returns A promise that resolves to an array of fetched categories sorted by their `orderHint` value.
 */
async function getCategories(limit: number = 20): Promise<Category[]> {
  // Check if the limit exceeds the maximum allowed
  if (limit > 500) {
    throw new Error('Limit cannot exceed 500');
  }
  // This array will store ordered Categories from all fetched pages
  let orderedCategories: Category[] = [];

  // Set up initial query arguments with limit, offset, and sort parameters
  const methodArgs = {
    queryArgs: {
      limit: limit, // Max Category results returned per request
      offset: 0, // Starting offset for pagination
      sort: ['orderHint', 'id'], // Sort primarily by orderHint; id is used as a tiebreaker to ensure no Categories are skipped
    },
  };
  // Fetch the first page of Categories
  let categoryResponse =
    await getCommercetoolsCategoryPagedQueryResponse(methodArgs);

  if (categoryResponse) {
    // Destructure the results, count, and total from the response body
    let { results = [], count = 0, total = 0 } = categoryResponse.body;
    // Add the result Categories to our orderedCategories array
    orderedCategories.push(...results);

    // Determine if there are more result pages
    let hasMorePages = methodArgs.queryArgs.offset + count < total;

    // If more result pages exist, continue fetching until all pages are retrieved
    while (hasMorePages) {
      // Increment the offset by the count of items we just retrieved
      methodArgs.queryArgs.offset += count;

      // Fetch the next page of Categories
      categoryResponse =
        await getCommercetoolsCategoryPagedQueryResponse(methodArgs);

      if (categoryResponse) {
        // Destructure the response of the new page
        let { results = [], count = 0, total = 0 } = categoryResponse.body;
        // Append these categories to our ordered categories array
        orderedCategories.push(...results);
        // Check if we still have more pages to get
        hasMorePages = methodArgs.queryArgs.offset + count < total;
      } else {
        // If no response is returned, stop trying to fetch more pages
        hasMorePages = false;
      }
    }
  }
  // Return the full array of fetched categories after pagination is complete
  return orderedCategories;
}

function categoryToMenuObject(category: Category) {
  return {
    id: category.id, // Category ID
    parent: category.parent, // Parent Category ID
    orderHint: category.orderHint, // Category orderHint
    name: category.name, // Category name (per locale)
    slug: category.slug, // Category slug (per locale)
    submenus: [], // List of children (from Child Categories)
  };
}

function buildCategoryTree(categories: Category[]) {
  const categoryTree = [];
  const categoryMap: { [key: string]: any } = {};

  // Loop the categories in the map
  let menuObject;
  for (const category of categories) {
    menuObject = categoryToMenuObject(category);
    if (!category.parent) {
      // If this is a top-level category, add it to the category tree and the category map
      categoryTree.push(menuObject);
      categoryMap[category.id] = menuObject;
    } else {
      categoryMap[category.id] = menuObject;
    }
  }

  for (const category of Object.values(categoryMap)) {
    if (category.parent?.id) {
      categoryMap[category.parent.id].submenus.push(category);
    }
  }
  return categoryTree;
}