<template>
  <section-wrapper class="bg-background-3 pb-12">
    <section-container mobile-padding class="max-w-container">
      <h2 class="text-primary mb-10 text-[1.563rem] font-bold">
        Mon compte Stripe
      </h2>

      <div v-if="company.has_stripe_account && company.onboarding_completed">
        <Message :sticky="true" severity="success" :closable="false"
          >Votre compte Stripe est actif.
        </Message>

        <rounded-button
          class="w-full"
          @click="getDashboardUrl"
          design="3"
          target="_blank"
          >{{
            redirecting ? "Redirection..." : "Mon dashboard Stripe"
          }}</rounded-button
        >
      </div>

      <Message v-else :sticky="true" severity="info" :closable="false"
        >Votre compte Stripe n'est pas encore créé (Voir message en haut de
        page)</Message
      >
    </section-container>
  </section-wrapper>
</template>

<script setup>
import { useAuthStore } from "../store/auth";

const { company } = useAuthStore();

const { $api, $toast } = useNuxtApp();

const redirecting = ref(false);

const getDashboardUrl = () => {
  redirecting.value = true;

  return $api
    .call("get", $api.route("me.stripe-dashboard-link"))
    .then((payload) => {
      window.location.href = payload.url;
    })
    .catch((e) => {
      if (e.response) {
        if (e.response.data.message) {
          $toast.error(e.response.data.message);
        } else {
          if (e.response.data.error) {
            $toast.error(e.response.data.error);
          }
        }
      }
    })
    .finally(() => {
      redirecting.value = false;
    });
};
</script>
