"use server";
import React from "react";
import Link from "next/link";

import { Home } from "lucide-react";
import { transformMenu, LanguageTranslation } from "@/components/menu/runner";

async function LeftMenu({
  searchParams,
  pageUuidList,
  lang,
  pageSelected,
}: {
  pageUuidList: string[];
  lang: keyof LanguageTranslation;
  searchParams: { [key: string]: string | string[] | undefined };
  pageSelected: string;
}) {
  const transformedMenu = transformMenu(pageUuidList) || [];

  // Get the menuContext from searchParams without setting a default value
  const menuContext = searchParams?.menu;

  // Only parse the indices if menuContext exists
  let firstLayerIndex = -1;
  let secondLayerIndex = -1;

  if (menuContext) {
    const indices = menuContext.toString().split("*").map(Number);
    firstLayerIndex = indices[0] || 0;
    secondLayerIndex = indices[1] || 0;
  }

  return (
    <div>
      <nav className="flex flex-col space-y-2">
        <div className="text-xl font-bold mb-6 text-center">Dashboard</div>
        {transformedMenu &&
          transformedMenu.map((item, firstIndex) => (
            <div key={item.name} className="mb-4">
              <Link
                href={`${pageSelected}?menu=${firstIndex}*0`}
                className={`text-xl font-semibold pl-5 my-2 py-2 block ${
                  firstIndex === firstLayerIndex
                    ? "text-emerald-600"
                    : "text-emerald-400"
                } hover:text-emerald-600`}
              >
                {item.lg[lang]}
              </Link>

              {/* Only render the second layer if menuContext exists and this first layer item is selected */}
              {menuContext && firstIndex === firstLayerIndex && (
                <ul className="space-y-2">
                  {item.subList.map((subItem, secondIndex) => (
                    <div key={subItem.name}>
                      <Link
                        href={`${pageSelected}?menu=${firstIndex}*${secondIndex}`}
                        className={`ml-5 my-4 pl-4 text-xl font-semibold block ${
                          secondIndex === secondLayerIndex
                            ? "text-emerald-700"
                            : "text-emerald-500"
                        } hover:text-emerald-700`}
                      >
                        {subItem.lg[lang]}
                      </Link>
                      {/* Only render the third layer if this second layer item is selected */}
                      {firstIndex === firstLayerIndex &&
                        secondIndex === secondLayerIndex && (
                          <div className="ml-5">
                            {subItem.subList.map((subSubItem) =>
                              `${pageSelected}` !== subSubItem.siteUrl ? (
                                <Link
                                  key={subSubItem.name}
                                  href={`${subSubItem?.siteUrl}?menu=${firstIndex}*${secondIndex}`}
                                  className={`flex flex-row text-xl py-4 my-4 w-full space-x-2 p-2 rounded hover:bg-gray-200`}
                                >
                                  <span className="text-gray-400">
                                    <Home />
                                  </span>
                                  <span className="ml-5 text-gray-700">
                                    {subSubItem.lg[lang]}
                                  </span>
                                </Link>
                              ) : (
                                <a
                                  key={subSubItem.name}
                                  href={`${subSubItem?.siteUrl}?menu=${firstIndex}*${secondIndex}`}
                                  className={`flex flex-row text-xl py-4 my-4 w-full space-x-2 p-2 rounded bg-gray-100 cursor-not-allowed"`}
                                >
                                  <span className="text-gray-400">
                                    <Home />
                                  </span>
                                  <span className="ml-5 text-gray-700">
                                    {subSubItem.lg[lang]}
                                  </span>
                                </a>
                              )
                            )}
                          </div>
                        )}
                    </div>
                  ))}
                </ul>
              )}
            </div>
          ))}
      </nav>
    </div>
  );
}

export default LeftMenu;