<template>
  <div
    class="ivyforms-total-field-preview ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-8 ivyforms-width-100"
  >
    <IvyFormItem
      :label="hideLabel ? '' : label"
      :required="required"
      :label-position="labelPosition"
    >
      <div class="ivyforms-flex ivyforms-gap-10 ivyforms-align-items-center">
        <span v-if="inputPrefix" class="regular-16 text-secondary">{{ inputPrefix }}</span>
        <span class="regular-16 text-primary">0</span>
        <span class="regular-16 text-primary">{{ currencySymbol }}</span>
        <span v-if="inputSuffix" class="regular-16 text-secondary">{{ inputSuffix }}</span>
      </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 { useFormPaymentCurrency } from '@/composables/useFormPaymentCurrency'
import IvyFormItem from '@/views/_components/form/IvyFormItem.vue'

const props = defineProps<{ fieldIndex: number }>()
const formBuilderStore = useFormBuilder()
const { currencySymbol } = useFormPaymentCurrency()

const field = computed(() => formBuilderStore.fields.find((f) => f.fieldIndex === props.fieldIndex))

const label = computed(() => field.value?.label || '')
const required = computed(() => field.value?.required || false)
const hideLabel = computed(() => field.value?.hideLabel || false)
const description = computed(() => field.value?.description || '')
const labelPosition = computed(() =>
  field.value?.labelPosition === 'default' ? 'top' : field.value?.labelPosition || 'top',
)
const inputPrefix = computed(() => String(field.value?.inputPrefix || ''))
const inputSuffix = computed(() => String(field.value?.inputSuffix || ''))
</script>

<style scoped lang="scss">
.ivyforms-total-field-preview {
  :deep(.ivyforms-form-item),
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
