<template>
  <div class="ivyforms-field__gdpr">
    <IvyFormItem :label="hideLabel ? '' : label" :required="true" :label-position="'top'">
      <div
        class="ivyforms-field__gdpr-row ivyforms-flex ivyforms-align-items-center ivyforms-gap-8"
        @click.prevent.stop
      >
        <IvyCheckbox
          :model-value="false"
          priority="secondary"
          type="checkmark"
          class="ivyforms-field__gdpr-checkbox readonly-option"
          :disabled="true"
        >
          <SafeHTML
            :html="agreementText || getLabel('agreement_text_placeholder')"
            field-type="gdpr"
          />
        </IvyCheckbox>
      </div>
      <div v-if="description" class="ivyforms-description-message regular-14">
        {{ description }}
      </div>
    </IvyFormItem>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useFormBuilder } from '@/stores/useFormBuilder'
import { useLabels } from '@/composables/useLabels'
import IvyCheckbox from '@/views/_components/checkbox/IvyCheckbox.vue'
import IvyFormItem from '@/views/_components/form/IvyFormItem.vue'
import SafeHTML from '@/views/_components/SafeHTML.vue'

const props = defineProps<{ fieldIndex: number }>()
const formBuilderStore = useFormBuilder()
const { getLabel } = useLabels()

const field = computed(() => formBuilderStore.fields.find((f) => f.fieldIndex === props.fieldIndex))
const label = computed(() => field.value?.label || '')
const hideLabel = computed(() => field.value?.hideLabel || false)
const description = computed(() => field.value?.description || '')
const agreementText = computed(
  () => ((field.value as Record<string, unknown>)?.agreementText as string) || '',
)
</script>

<style lang="scss" scoped>
.ivyforms-field__gdpr {
  .readonly-option {
    pointer-events: none;
    cursor: default;
    user-select: none;
  }

  :deep(.ivyforms-form-item__label) {
    cursor: default !important;
  }

  :deep(a) {
    color: var(--map-accent-sky-blue-fill-1);
    text-decoration: underline;
    pointer-events: none !important;
    cursor: default !important;
    user-select: none;

    &:hover {
      color: var(--map-accent-sky-blue-fill-1);
      text-decoration: underline;
    }
  }

  :deep(span) {
    user-select: none;
  }
}
</style>
