<template>
  <div class="ivyforms-field__html">
    <IvyFormItem :label="hideLabel ? '' : label" :label-position="labelPosition">
      <SafeHTML
        v-if="htmlContent"
        class="ivyforms-field__html-preview"
        :html="htmlContent"
        :allowed-tags="ALLOWED_TAGS"
        :allowed-attributes="ALLOWED_ATTR"
      />
      <div
        v-else
        class="ivyforms-field__html-placeholder ivyforms-flex ivyforms-p-12 ivyforms-align-items-center ivyforms-justify-content-center regular-14"
      >
        {{ getLabel('html_field_placeholder') }}
      </div>
      <div v-if="description" class="ivyforms-description-message ivyforms-mt-8 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 SafeHTML from '@/views/_components/SafeHTML.vue'
import {
  ALLOWED_HTML_TAGS as ALLOWED_TAGS,
  ALLOWED_HTML_ATTR as ALLOWED_ATTR,
} from '@/constants/html-sanitization.ts'

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 htmlContent = computed(() => field.value?.htmlContent || '')
const description = computed(() => field.value?.description || '')
const labelPosition = computed(() =>
  field.value?.labelPosition === 'default' ? 'top' : field.value?.labelPosition || 'top',
)
</script>

<style lang="scss" scoped>
.ivyforms-field__html {
  cursor: default;

  .ivyforms-form-item {
    cursor: default;
    margin-bottom: 0;

    :deep(.ivyforms-form-item__label) {
      display: flex;
      align-items: center;
      color: var(--map-base-text-0);
      /* Medium/Medium 14 */
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px; /* 142.857% */
      cursor: default !important;
    }

    :deep(.el-form-item__label) {
      cursor: default;
    }
  }

  &-preview,
  .ivyforms-safe-html {
    padding: 12px;
    border-radius: var(--Radius-radius-md, 8px);
    border: 1px solid var(--map-base-dusk-stroke--2);
    background: var(--map-base-dusk-o025);
    color: var(--map-base-text-0);
    min-height: 40px;
    cursor: default;
    width: 95%;
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  &-placeholder {
    border-radius: var(--Radius-radius-md, 8px);
    border: 1px dashed var(--map-base-dusk-stroke--2);
    background: var(--map-base-dusk-o025);
    color: var(--map-base-dusk-stroke--2);
    min-height: 40px;
    cursor: default;
  }

  .ivyforms-description-message {
    color: var(--map-base-text-0);
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
</style>
