import Handlebars from "handlebars";
import { Play, X } from "phosphor-react";
import { useEffect, useState } from "react";
import state, { IFile, ILog } from "../../state";
import Button from "../Button";
import Box from "../Box";
import Input from "../Input";
import Stack from "../Stack";
import {
Dialog,
DialogTrigger,
DialogContent,
DialogTitle,
DialogDescription,
DialogClose,
} from "../Dialog";
import Flex from "../Flex";
import { useSnapshot } from "valtio";
const generateHtmlTemplate = (code: string) => {
return `
kissa
`;
};
const RunScript: React.FC<{ file: IFile }> = ({ file }) => {
const snap = useSnapshot(state);
const parsed = Handlebars.parse(file.content);
const names = parsed.body
.filter((i) => i.type === "MustacheStatement")
// @ts-expect-error
.map((block) => block?.path?.original);
const defaultState: Record = {};
names.forEach((name) => (defaultState[name] = ""));
const [fields, setFields] = useState>(defaultState);
const [iFrameCode, setIframeCode] = useState("");
const [isDialogOpen, setIsDialogOpen] = useState(false);
const runScript = () => {
const template = Handlebars.compile(file.content);
const code = template(fields);
setIframeCode(generateHtmlTemplate(code));
};
useEffect(() => {
const handleEvent = (e: any) => {
if (e.data.type === "log" || e.data.type === "error") {
console.log(e.data);
const data: ILog[] = e.data.args.map((msg: any) => ({
type: e.data.type,
message: msg.toString(),
}));
state.scriptLogs = [...snap.scriptLogs, ...data];
}
};
window.addEventListener("message", handleEvent);
return () => window.removeEventListener("message", handleEvent);
}, [snap.scriptLogs]);
return (
<>
{iFrameCode && (
)}
);
};
export default RunScript;