<template>
  <div
    :class="[
      'form-item form-item-display',
      half ? 'form-item-half' : '',
      elclass || '',
      label === undefined ? 'form-item-display-nb' : '',
      $slots.button ? 'form-item-wb' : ''
    ]">
    <slot name="content">
      <label>
        <span v-if="label !== undefined && label !== ''" class="display-title">
          <strong>{{ label }}</strong>
        </span>
        <template v-if="modelText !== undefined && modelText !== ''">
          <template v-if="typeof modelText === 'string'">
            <span :class="[size ? 'form-item-size form-item-size-' + size : '']">
              {{ price ? globalStore.toTrLocale(modelText) : modelText }}
            </span>
          </template>
          <template v-if="typeof modelText === 'object'">
            <ul>
              <li v-for="txt in modelText">
                {{ txt }}
              </li>
            </ul>
          </template>
        </template>
        <template v-else>
          <span :class="[size ? 'form-item-size form-item-size-' + size : '']">
            {{ price ? globalStore.toTrLocale(localValue) : localValue }}
          </span>
        </template>
        <span
          class="form-item-alert"
          v-if="InvalidMessages.length > 0 && InvalidMessages !== ''">
          {{ InvalidMessages }}
        </span>
      </label>
      <div v-if="$slots.button" class="form-item-button"><slot name="button"></slot></div>
    </slot>
    <div
      class="form-display-extra"
      v-if="messages !== undefined && messages.length !== 0">
      <ul>
        <li v-for="txt in messages">
          {{ txt }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  import { useDateStore } from '@/stores/dateStore'
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  const dateStore = useDateStore()

  export interface Props {
    label?: string
    modelValue?: any
    half?: boolean
    title?: string
    elclass?: string
    type?: string
    messages?: string[]
    modelText?: any
    invalidText?: string
    price?: boolean
    size?: number | string
  }
  const props = withDefaults(defineProps<Props>(), {
    half: false,
    price: false
  })
  const localValue = ref<any>(props.modelValue)

  if (
    props.type === 'date' &&
    props.modelValue !== null &&
    props.modelValue !== undefined &&
    props.modelValue !== ''
  )
    localValue.value = dateStore.dateFormat({
      date: props.modelValue as Date,
      pattern: 'dd-mm-yy'
    })

  if (
    props.type === 'datetime' &&
    props.modelValue !== null &&
    props.modelValue !== undefined &&
    props.modelValue !== ''
  )
    localValue.value = dateStore.dateFormat({
      date: props.modelValue as Date,
      pattern: 'dd-mm-yy-t'
    })

  if (props.type === 'array') {
    localValue.value = props.modelValue.toString()
  }

  const InvalidMessageText = reactive<Record<string, any>>({})
  const InvalidMessages = computed<string>(() => {
    let text = ''
    Object.keys(InvalidMessageText).forEach((k: string, i: number) => {
      text += InvalidMessageText[k] + ', '
    })
    return text
  })

  watch(
    () => props.invalidText,
    () => {
      if (props.invalidText !== undefined && props.invalidText !== '') {
        Object.assign(InvalidMessageText, {})
        InvalidMessageText.invalid = props.invalidText
      } else {
        delete InvalidMessageText.invalid
      }
    }
  )
</script>
<style scoped>
  .form-item-size {
    font-weight: 600;
  }
  .form-item-size-1 {
    font-size: 1.2em;
  }
  .form-item-size-2 {
    font-size: 1.5em;
  }
</style>
