import { ReactElement } from "react";
import hljs from "highlight.js";
import { ActionMenu } from "@/app/components/action-menu";

// Highlight.js theme
import "highlight.js/styles/github-dark-dimmed.css";
import { cn } from "@/app/common/utils";
import { jetbrainsMono } from "@/app/common/font/font";

type PasteProps = {
  params: {
    id: string;
  };
};

type Paste = {
  /**
   * The paste content.
   */
  content?: string;

  /**
   * Whether an error occurred.
   */
  error?: boolean;
};

async function getData(id: string): Promise<Paste> {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_ENDPOINT}/${id}`);
  const json = await response.json();

  if (json.code && json.message) {
    return {
      error: true,
    };
  }

  return json as Paste;
}

export default async function Paste({
  params: { id },
}: PasteProps): Promise<ReactElement> {
  const { content, error } = await getData(id);

  if (content == undefined || error) {
    return <div>Not found</div>;
  }

  return (
    <div className="relative">
      <ActionMenu />

      <pre>
        <code
          className={cn("hljs !bg-transparent", jetbrainsMono.className)}
          dangerouslySetInnerHTML={{
            __html: hljs.highlightAuto(content).value,
          }}
        />
      </pre>
    </div>
  );
}