<script setup lang="ts">
import { ButtonStyled } from "@modrinth/ui";
import { MailIcon, CheckIcon } from "@modrinth/assets";
import { ref } from "vue";
import { useBaseFetch } from "~/composables/fetch.js";

const auth = await useAuth();
const showSubscriptionConfirmation = ref(false);
const showSubscribeButton = useAsyncData(
  async () => {
    if (auth.value?.user) {
      try {
        const { subscribed } = await useBaseFetch("auth/email/subscribe", {
          method: "GET",
        });
        return !subscribed;
      } catch {
        return true;
      }
    } else {
      return false;
    }
  },
  { watch: [auth], server: false },
);

async function subscribe() {
  try {
    await useBaseFetch("auth/email/subscribe", {
      method: "POST",
    });
    showSubscriptionConfirmation.value = true;
  } catch {
  } finally {
    setTimeout(() => {
      showSubscriptionConfirmation.value = false;
      showSubscribeButton.status.value = "success";
      showSubscribeButton.data.value = false;
    }, 2500);
  }
}
</script>

<template>
  <ButtonStyled
    v-if="showSubscribeButton.status.value === 'success' && showSubscribeButton.data.value"
    color="brand"
    type="outlined"
  >
    <button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
      <template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
      <template v-else> <CheckIcon /> Subscribed! </template>
    </button>
  </ButtonStyled>
</template>
