<template>
  <ka-form-field
    v-model="isLegalChecked"
    type="checkbox"
    is-required
    :size="size"
    :hide-asterisk="hideAsterisk"
  >
    <privacy-modal :comunicationType="comunicationType">
      <template #default="{ openModal }">
        <i18n tag="span" path="text">
          <a
            slot="link"
            :aria-label="`${$t('aria')}`"
            href="#"
            class="hl-link"
            @click.prevent="openModal"
            v-text="$t('link')"
          />
        </i18n>
      </template>
    </privacy-modal>
  </ka-form-field>
</template>

<script lang="ts">
import KaFormField from '@kalimotxo/ui/components/KaForm/_components/KaFormField.vue'
import PrivacyModal from '@kalimotxo/ui/components/PrivacyModal/PrivacyModal.vue'

export default {
  components: { KaFormField, PrivacyModal },
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    size: {
      type: String,
      required: false,
    },
    hideAsterisk: {
      type: Boolean,
      default: false,
    },
    comunicationType: {
      type: String,
      validator: (value: string) =>
        ['commercial', 'newsletter', 'collaborator'].includes(value),
      default: 'commercial',
    },
  },
  computed: {
    isLegalChecked: {
      get() {
        return this.value
      },
      set(value: boolean) {
        this.$emit('input', value)
      },
    },
  },
  i18n: {
    messages: {
      es: {
        text: 'Acepto recibir {link}',
        link: 'comunicaciones comerciales.',
        aria: 'Abrir la política de privacidad de Holaluz',
      },
      ca: {
        text: 'Accepto rebre {link}',
        link: 'comunicacions comercials.',
        aria: "Obrir la política de privacitat d'Holaluz",
      },
      en: {
        text: 'I agree to receive {link}',
        link: 'commercial information.',
        aria: ' Open Holaluz privacy policy',
      },
    },
  },
}
</script>
<style lang="postcss" scoped>
:deep(.privacy-modal),
:deep(.privacy-modal > div) {
  display: contents;
}
</style>
