<script setup>
import { Effect } from "effect";
import { navigateTo, useRouter } from "#app";
import { cel as _rawCel } from "../../../../../utils/cel";
import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
import ShwfedActionDefinition from "../../../components/definition.vue";
defineOptions({ name: "ShwfedNavigationActionRuntime" });
const props = defineProps({
  buttonId: { type: String, required: true },
  config: { type: null, required: true }
});
const router = useRouter();
const inherited = injectCELContext();
const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
function isExternal(url) {
  try {
    return new URL(url, window.location.href).origin !== window.location.origin;
  } catch {
    return false;
  }
}
const effect = Effect.suspend(
  () => Effect.flatMap(
    $cel(props.config.url),
    (url) => Effect.promise(async () => {
      const external = isExternal(url);
      if (props.config.mode === "_blank") {
        window.open(external ? url : router.resolve(url).href, "_blank");
        return;
      }
      await navigateTo(url, { external });
    })
  )
);
</script>

<template>
  <ShwfedActionDefinition
    :action-id="buttonId"
    :effect="effect"
  />
</template>
