<script context="module">import { enterKey } from "./actions/events";
import { focus } from "./actions/focus";
import Alert, {} from "./Alert.svelte";
import Button from "./Button.svelte";
import { autolink, br, escape } from "./helpers";
import { t } from "./intl";
export const globals = {
  inform(type, title, message) {
    return new Promise((resolve) => resolve());
  },
  confirm(title, message, options) {
    return Promise.resolve(false);
  },
  prompt(title, message, options) {
    return Promise.resolve("");
  }
};
if (typeof window !== "undefined") {
  window.globals = globals;
}
</script>

<script>import Modal from "./Modal.svelte";
let confirmData = null;
let informData = null;
let promptData = null;
let hovered = false;
function resolve(obj, value) {
  obj && obj.resolve(value);
}
function resolveIfTimedout(obj, value) {
  obj && obj.resolveIfTimedout(value);
}
globals.confirm = function(title, message, opts) {
  if (typeof message !== "string") {
    opts = message || opts || {};
    message = title;
    title = $t("confirm");
  }
  const options = opts || {};
  return new Promise((resolve2) => {
    confirmData = { title, message, options, resolve: resolve2 };
  }).then((answer) => {
    confirmData = null;
    return answer;
  });
};
globals.prompt = function(title, message, options = {}) {
  return new Promise((resolve2) => {
    promptData = { title, message, options, input: "", resolve: resolve2 };
  }).then((answer) => {
    promptData = null;
    return answer;
  });
};
globals.inform = inform;
async function inform(type, title, message) {
  if (informData) {
    clearTimeout(informData.timeout);
    informData = null;
  }
  if (!message) {
    message = title;
    title = "";
  }
  return new Promise((resolve2) => {
    let timeout = setTimeout(() => {
      timeout = 0;
      if (!hovered) resolve2();
    }, 6e3);
    informData = {
      type,
      title,
      message,
      resolve: resolve2,
      timeout,
      resolveIfTimedout: () => {
        if (!timeout) {
          hovered = false;
          resolve2();
        }
      }
    };
  }).then(() => {
    informData = null;
  });
}
</script>

{#if promptData}
  <Modal
    title={promptData.title}
    size="small"
    on:close={() => resolve(promptData, '')}
    nofocus={promptData.options.noFocus}
  >
    <section>
      <p>{@html autolink(br(escape(promptData.message)), true)}</p>
      <input
        type="text"
        class="form-control"
        placeholder={promptData.options.placeholder || ''}
        bind:value={promptData.input}
        use:enterKey={() => resolve(promptData, promptData.input)}
        use:focus
      />
    </section>
    <footer class="gap-x-3">
      <Button type="secondary" on:click={() => resolve(promptData, '')}>{$t('dialog_cancel')}</Button>
      <Button type="primary" on:click={() => resolve(promptData, promptData.input)}>{$t('dialog_ok')}</Button>
    </footer>
  </Modal>
{/if}

{#if confirmData}
  <Modal
    title={confirmData.title}
    size="small "
    on:close={() => resolve(confirmData, null)}
    nofocus={confirmData.options.noFocus}
  >
    <section>
      <p>{@html autolink(br(escape(confirmData.message)), true)}</p>
    </section>
    <footer class="gap-x-3">
      <Button type="secondary" on:click={() => resolve(confirmData, false)}
        >{confirmData.options.yesNo ? $t('dialog_no') : $t('dialog_cancel')}</Button
      >
      <Button type="primary" on:click={() => resolve(confirmData, true)}
        >{confirmData.options.yesNo ? $t('dialog_yes') : confirmData.options.okButtonText || $t('dialog_ok')}</Button
      >
    </footer>
  </Modal>
{/if}

{#if informData}
  <!-- TODO add global back to Alert to make it absolute positioned -->
  <Alert
    type={informData.type}
    dismissible
    bind:hovered
    on:close={() => resolve(informData)}
    on:unhovered={() => resolveIfTimedout(informData)}
  >
    {#if informData}
      {#if informData.title}<strong>{informData.title}</strong>{/if}
      {informData.message}
    {/if}
  </Alert>
{/if}

<style>
</style>
