import { ConfirmModal, Focusable, showModal } from "decky-frontend-lib";
import { VFC, useEffect, useState } from "react";
import { ScrollableWindowRelative } from "./ScrollableWindow";
import { t } from "i18next";

interface LogFileProps {
  plugin: string;
  name: string;
  closeModal?: () => void;
}

const uploadConfirmation = (name: string, plugin: string) => {
  const confirmModal = <ConfirmModal onOK={() => {
    window.DeckyPluginLoader.callServerMethod("upload_log", { plugin_name: plugin, log_name: name }).then((res) => {
      console.log(res)
      showModal(<ConfirmModal><h2>{res.result}</h2></ConfirmModal>)
    })
  }} strTitle={t("LogViewer.uploadConfirm")}>{t("LogViewer.uploadDisclaimer")}</ConfirmModal>
  showModal(confirmModal);
}

const LogViewModal: VFC<LogFileProps> = ({ name, plugin, closeModal }) => {
  const [logText, setLogText] = useState("");
  useEffect(() => {
    window.DeckyPluginLoader.callServerMethod("get_plugin_log_text", {
      plugin_name: plugin,
      log_name: name,
    }).then((text) => {
      setLogText(text.result || t("LogViewer.textError"));
    });
  }, []);

  return (
    <Focusable
      style={{
        padding: "0 15px",
        display: "flex",
        position: "absolute",
        top: "var(--basicui-header-height)",
        bottom: "var(--gamepadui-current-footer-height)",
        left: 0,
        right: 0,
      }}
      onSecondaryActionDescription={t("LogViewer.uploadLog")}
      onSecondaryButton={() => uploadConfirmation(name, plugin)}
    >
      <ScrollableWindowRelative alwaysFocus={true} onCancel={closeModal}>
        <div style={{ whiteSpace: "pre-wrap", padding: "12px 0" }}>
          {logText}
        </div>
      </ScrollableWindowRelative>
    </Focusable>
  );
};

export default LogViewModal;