import { usePage } from "@inertiajs/react";
import { SettingsIcon } from "lucide-react";

import SettingRegistry from "@/back/Components/Layout/Settings/SettingRegistry";
import type { ConfigBackend } from "@/back/types/global";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

interface AppSettingsProps {
  className?: string;
}

export default function AppSettings({
  className = "",
}: Readonly<AppSettingsProps>) {
  const { appEnv, configBackend } = usePage().props as unknown as {
    appEnv: AppEnv;
    configBackend: ConfigBackend;
  };
  return (
    <div className={cn(className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button className="text-muted-foreground" variant="ghost">
            <SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
            <span className="hidden lg:block">
              {trans("uwil-backend::back.settings")}
            </span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent side="bottom" className="w-fit me-1">
          {SettingRegistry.getAll(appEnv, configBackend).map(
            (Section, index, arr) => (
              <div key="section">
                {Section}
                {Section && index < arr.length - 1 && <DropdownMenuSeparator />}
              </div>
            ),
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}