<template>
  <div v-if="lineTexts.length" class="ivyforms-product-entry-display ivyforms-width-100">
    <div
      class="ivyforms-product-entry-display__list ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-10"
    >
      <div
        v-for="(text, idx) in lineTexts"
        :key="idx"
        class="ivyforms-product-entry-display__line regular-14"
        style="color: var(--map-base-text-0)"
      >
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  formatProductSnapshotLineForDisplay,
  parseProductEntrySnapshot,
} from '@/utils/productFieldConfig'
import {
  DEFAULT_CURRENCY_CODE,
  type CurrencyCode,
  isCurrencyCode,
} from '@/constants/supportedCurrencies'

const props = defineProps<{
  value: string | number | null | undefined
  /** Form payment currency — same source as total field in entry results. */
  currencyCode?: string | null
}>()

const resolvedCurrency = computed<CurrencyCode>(() => {
  const c = props.currencyCode
  if (typeof c === 'string' && isCurrencyCode(c)) {
    return c
  }
  return DEFAULT_CURRENCY_CODE
})

const snapshot = computed(() => parseProductEntrySnapshot(props.value))

const lineTexts = computed(() => {
  const snap = snapshot.value
  if (!snap?.lines.length) {
    return []
  }
  const code = resolvedCurrency.value
  return snap.lines.map((line) => formatProductSnapshotLineForDisplay(line, code))
})
</script>

<style scoped lang="scss">
.ivyforms-product-entry-display {
  &__line {
    line-height: 1.4;
    word-break: break-word;
  }
}
</style>
