<script setup>
import { defu } from "defu";
import { computed, onBeforeUnmount, onMounted, ref, resolveComponent, shallowRef } from "vue";
import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
import { useScriptPayPal } from "../registry/paypal";
const props = defineProps({
  rootAttrs: { type: Object, required: false },
  trigger: { type: [String, Array, Boolean], required: false, default: "visible" },
  clientId: { type: String, required: false, default: "test" },
  clientToken: { type: String, required: false },
  components: { type: Array, required: false, default: () => ["paypal-payments"] },
  pageType: { type: String, required: false },
  locale: { type: String, required: false },
  merchantId: { type: [String, Array], required: false },
  partnerAttributionId: { type: String, required: false },
  paypalScriptOptions: { type: Object, required: false, default: () => ({}) }
});
const emit = defineEmits(["ready", "error"]);
defineSlots();
const el = ref(null);
const rootEl = ref(null);
const ready = ref(false);
const failed = ref(false);
const sdkInstance = shallowRef();
const { onLoaded, status } = useScriptPayPal({
  ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
  ...props.paypalScriptOptions
});
onMounted(() => {
  onLoaded(async ({ paypal }) => {
    if (!el.value)
      return;
    const instanceOptions = {
      ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
      components: props.components,
      ...props.pageType && { pageType: props.pageType },
      ...props.locale && { locale: props.locale },
      ...props.merchantId && { merchantId: props.merchantId },
      ...props.partnerAttributionId && { partnerAttributionId: props.partnerAttributionId }
    };
    try {
      sdkInstance.value = await paypal.createInstance(instanceOptions);
      ready.value = true;
      emit("ready", sdkInstance.value);
    } catch (err) {
      sdkInstance.value = void 0;
      failed.value = true;
      emit("error", err);
    }
  });
});
onBeforeUnmount(() => {
  sdkInstance.value = void 0;
});
defineExpose({
  /** The PayPal SDK v6 instance for creating payment sessions, checking eligibility, etc. */
  sdkInstance
});
const ScriptLoadingIndicator = resolveComponent("ScriptLoadingIndicator");
const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
const rootAttrs = computed(() => {
  return defu(props.rootAttrs, {
    "aria-busy": status.value === "loading",
    "aria-label": status.value === "awaitingLoad" ? "PayPal Script Placeholder" : status.value === "loading" ? "PayPal Loading" : "PayPal",
    "aria-live": "polite",
    "role": "application",
    ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
  });
});
</script>

<template>
  <div ref="rootEl" v-bind="rootAttrs">
    <div ref="el">
      <slot v-if="ready" name="default" :sdk-instance="sdkInstance" />
    </div>
    <slot v-if="status !== 'error' && !ready && !failed" name="placeholder">
      placeholder
    </slot>
    <slot v-if="status !== 'awaitingLoad' && status !== 'error' && !ready && !failed" name="loading">
      <ScriptLoadingIndicator color="black" />
    </slot>
    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
    <slot v-else-if="status === 'error' || failed" name="error" />
  </div>
</template>
