<template>
  <div>
    <section class="universal-card">
      <h2 class="text-2xl">Revenue</h2>
      <div v-if="userBalance.available >= minWithdraw">
        <p>
          You have
          <strong>{{ $formatMoney(userBalance.available) }}</strong>
          available to withdraw. <strong>{{ $formatMoney(userBalance.pending) }}</strong> of your
          balance is <nuxt-link class="text-link" to="/legal/cmp-info#pending">pending</nuxt-link>.
        </p>
      </div>
      <p v-else>
        You have made
        <strong>{{ $formatMoney(userBalance.available) }}</strong
        >, which is under the minimum of ${{ minWithdraw }} to withdraw.
        <strong>{{ $formatMoney(userBalance.pending) }}</strong> of your balance is
        <nuxt-link class="text-link" to="/legal/cmp-info#pending">pending</nuxt-link>.
      </p>
      <div class="input-group mt-4">
        <nuxt-link
          v-if="userBalance.available >= minWithdraw"
          class="iconified-button brand-button"
          to="/dashboard/revenue/withdraw"
        >
          <TransferIcon /> Withdraw
        </nuxt-link>
        <NuxtLink class="iconified-button" to="/dashboard/revenue/transfers">
          <HistoryIcon /> View transfer history
        </NuxtLink>
      </div>
      <p>
        By uploading projects to Modrinth and withdrawing money from your account, you agree to the
        <nuxt-link to="/legal/cmp" class="text-link">Rewards Program Terms</nuxt-link>. For more
        information on how the rewards system works, see our information page
        <nuxt-link to="/legal/cmp-info" class="text-link">here</nuxt-link>.
      </p>
    </section>
    <section class="universal-card">
      <h2 class="text-2xl">Payout methods</h2>
      <h3>PayPal</h3>
      <template v-if="auth.user.auth_providers.includes('paypal')">
        <p>
          Your PayPal {{ auth.user.payout_data.paypal_country }} account is currently connected with
          email
          {{ auth.user.payout_data.paypal_address }}
        </p>
        <button class="btn mt-4" @click="removeAuthProvider('paypal')">
          <XIcon /> Disconnect account
        </button>
      </template>
      <template v-else>
        <p>Connect your PayPal account to enable withdrawing to your PayPal balance.</p>
        <a class="btn mt-4" :href="`${getAuthUrl('paypal')}&token=${auth.token}`">
          <PayPalIcon />
          Sign in with PayPal
        </a>
      </template>
      <h3>Tremendous</h3>
      <p>
        Tremendous payments are sent to your Modrinth email. To change/set your Modrinth email,
        visit
        <nuxt-link to="/settings/account" class="text-link">here</nuxt-link>.
      </p>
      <h3>Venmo</h3>
      <p>Enter your Venmo username below to enable withdrawing to your Venmo balance.</p>
      <label class="hidden" for="venmo">Venmo address</label>
      <input
        id="venmo"
        v-model="auth.user.payout_data.venmo_handle"
        class="mt-4"
        type="search"
        name="search"
        placeholder="@example"
        autocomplete="off"
      />
      <button class="btn btn-secondary" @click="updateVenmo"><SaveIcon /> Save information</button>
    </section>
  </div>
</template>
<script setup>
import { TransferIcon, HistoryIcon, PayPalIcon, SaveIcon, XIcon } from "@modrinth/assets";

const auth = await useAuth();
const minWithdraw = ref(0.01);

const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
  useBaseFetch(`payout/balance`, { apiVersion: 3 }),
);

async function updateVenmo() {
  startLoading();
  try {
    const data = {
      venmo_handle: auth.value.user.payout_data.venmo_handle ?? null,
    };

    await useBaseFetch(`user/${auth.value.user.id}`, {
      method: "PATCH",
      body: data,
      apiVersion: 3,
    });
    await useAuth(auth.value.token);
  } catch (err) {
    const data = useNuxtApp();
    data.$notify({
      group: "main",
      title: "An error occurred",
      text: err.data.description,
      type: "error",
    });
  }
  stopLoading();
}
</script>
<style lang="scss" scoped>
strong {
  color: var(--color-text-dark);
  font-weight: 500;
}
</style>
