<template>
  <div class="redeem-select-community">
    <redeem-community-selection
      v-model:receiver-community="receiverCommunity"
      :link-data="props.linkData"
      :redeem-code="props.redeemCode"
      :is-contribution-link="props.isContributionLink"
    />

    <BCard>
      <div class="mb-2">
        <h2>{{ $t('gdd_per_link.redeem') }}</h2>
      </div>

      <BRow>
        <BCol sm="12" md="6">
          <p>{{ $t('gdd_per_link.no-account') }}</p>
          <BButton variant="primary" :disabled="isForeignCommunitySelected" :to="register()">
            {{ $t('gdd_per_link.to-register') }}
          </BButton>
        </BCol>
        <BCol sm="12" md="6" class="mt-4 mt-lg-0">
          <p>{{ $t('gdd_per_link.has-account') }}</p>
          <BButton variant="gradido" :disabled="isForeignCommunitySelected" :to="login()">
            {{ $t('gdd_per_link.to-login') }}
          </BButton>
        </BCol>
      </BRow>
    </BCard>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import CONFIG from '@/config'
import { useAuthLinks } from '@/composables/useAuthLinks'

const { login, register } = useAuthLinks()
const props = defineProps({
  linkData: { type: Object, required: true },
  redeemCode: { type: String, required: true },
  isContributionLink: { type: Boolean, default: false },
})

const receiverCommunity = ref({
  uuid: '',
  name: CONFIG.COMMUNITY_NAME,
  url: CONFIG.COMMUNITY_URL,
  foreign: false,
})

const isForeignCommunitySelected = computed(() => {
  return receiverCommunity.value.foreign === true
})
</script>
