import { useEffect, useState } from "octane";
import { Button } from "octane-kumo/components/button";
import type { SkillPackageFile } from "../../shared/skills";

export function SkillFileView({ file }: { file: SkillPackageFile }) {
  const [download, setDownload] = useState<{
    file: SkillPackageFile;
    url: string;
  } | null>(null);
  useEffect(() => {
    if (file.encoding !== "base64") return;
    const bytes = Uint8Array.from(atob(file.content), (character) =>
      character.charCodeAt(0),
    );
    const url = URL.createObjectURL(
      new Blob([bytes], { type: "application/octet-stream" }),
    );
    setDownload({ file, url });
    return () => URL.revokeObjectURL(url);
  }, [file]);
  return (
    <div className="skill-review-section">
      <h4>{file.path}</h4>
      {file.encoding === "base64" ? (
        <>
          <p>
            This binary file is available as a download. Its contents are not
            executed.
          </p>
          <Button
            disabled={download?.file !== file}
            onClick={() => {
              if (download?.file !== file) return;
              const link = document.createElement("a");
              link.href = download.url;
              link.download = file.path.split("/").at(-1) || "skill-file";
              link.click();
            }}
          >
            Download file
          </Button>
        </>
      ) : (
        <pre>{file.content}</pre>
      )}
    </div>
  );
}