<template>
  <div
    :class="[
      'ivyforms-field ivyforms-field__html ivyforms-mb-16',
      'ivyforms-field__html_' + field.id,
      field.cssClasses,
    ]"
  >
    <IvyFormItem :label="field.hideLabel ? '' : field.label" :label-position="field.labelPosition">
      <SafeHTML
        v-if="field.htmlContent"
        class="ivyforms-field__html-content"
        :html="field.htmlContent"
        :allowed-tags="ALLOWED_TAGS"
        :allowed-attributes="ALLOWED_ATTR"
      />
      <div
        v-if="field.description"
        class="ivyforms-field__html-description ivyforms-width-100 ivyforms-mt-8 regular-14"
      >
        {{ field.description }}
      </div>
    </IvyFormItem>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import SafeHTML from '@/views/_components/SafeHTML.vue'
import {
  ALLOWED_HTML_TAGS as ALLOWED_TAGS,
  ALLOWED_HTML_ATTR as ALLOWED_ATTR,
} from '@/constants/html-sanitization.ts'

interface Field {
  id: number
  type: string
  label: string
  hideLabel?: boolean
  htmlContent?: string
  description?: string
  labelPosition?: string
  cssClasses?: string
}

interface Props {
  field: Field
}

const props = defineProps<Props>()
const field = computed(() => props.field)
</script>

<style lang="scss" scoped>
.ivyforms-field__html {
  .ivyforms-form-item {
    margin-bottom: 0;

    :deep(.ivyforms-form-item__label) {
      display: flex;
      align-items: center;
      color: var(--map-base-text-0);
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
    }
  }

  &__html-content,
  .ivyforms-safe-html {
    width: 100%;
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  &-description {
    color: var(--map-base-text--1);
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
</style>
