import { Button } from "@/components/ui/button";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { faFileEdit, faSave } from "@fortawesome/free-solid-svg-icons";
import { Editor } from "@monaco-editor/react";
import { useParams } from "next/navigation";

export default function SelectedProjectFileView({
  fileView,
  file,
  isContentEditable,
  setFile,
  path,
  handleSaveFileClick,
}) {
  const { activeSession } = useApp();
  const { permissions } = activeSession;

  const { dict } = useGlobal();

  const params = useParams();

  switch (fileView) {
    case "code":
      return (
        <>
          <Editor
            value={file?.content}
            theme="light"
            defaultValue={dict.pages.project_files.editor.default}
            onMount={(editor, monaco) => {
              editor.setModel(
                monaco.editor.createModel(
                  file?.content ?? "",
                  undefined,
                  monaco.Uri.file(path ?? ""),
                ),
              );
            }}
            onChange={(evn) => {
              if (!isContentEditable) return;
              setFile((prev) => ({ ...prev, content: evn }));
            }}
          />
          {permissions && permissions.canEditFile() && (
            <div className="absolute bottom-0 right-0 m-4 mx-8 flex gap-2">
              <Button
                variant="solid"
                color="primary"
                size="sm"
                decorator={isContentEditable ? faSave : faFileEdit}
                onClick={handleSaveFileClick}
              >
                {isContentEditable
                  ? dict.pages.general.save
                  : dict.pages.general.edit}
              </Button>
            </div>
          )}
        </>
      );
    case "image":
      return (
        <>
          <picture className="flex h-full max-w-full grow items-center justify-center">
            <img
              className="max-h-full max-w-full"
              src={`https://${params.name}.fedgovadv.info/${path?.replace(
                `/home/fedgovad/FEDSITE_${params.name}/`,
                "",
              )}`}
              alt=""
            />
          </picture>
        </>
      );
    case "video":
      return (
        <>
          <video
            className="flex h-full max-w-full grow items-center justify-center bg-black"
            controls
          >
            <source
              src={`https://${params.name}.fedgovadv.info/${path?.replace(
                `/home/fedgovad/FEDSITE_${params.name}/`,
                "",
              )}`}
            />
          </video>
        </>
      );
    default:
      return (
        <>
          <embed
            className="flex h-full w-full max-w-full grow items-center justify-center bg-black"
            src={`https://${params.name}.fedgovadv.info/${path?.replace(
              `/home/fedgovad/FEDSITE_${params.name}/`,
              "",
            )}`}
          />
        </>
      );
  }
}