<template>
  <IvyFormItem :label="label" :prop="formItemProp" :secondary="formItemSecondary">
    <IvyTextInput
      ref="inputRef"
      :model-value="modelValue"
      :type="inputType"
      :placeholder="inputPlaceholder"
      :secondary="inputSecondary"
      @input="emit('update:modelValue', $event)"
      @blur="emit('blur', $event)"
    />
    <IvyPlaceholdersPopover
      :general-only="generalOnly"
      :fields="fields"
      :general="general"
      class="ivyforms-input-with-placeholders__popover"
      @insert-placeholder="handleInsertPlaceholder"
    >
      <template #reference>
        <IvyTooltip :content="getLabel('insert_placeholders')">
          <IvyButtonAction
            size="s"
            priority="tertiary"
            icon-only
            icon-start="context-menu-dot"
            icon-start-type="fill"
            type="ghost"
            :aria-label="getLabel('placeholders')"
            class="ivyforms-input-with-placeholders__btn"
          />
        </IvyTooltip>
      </template>
    </IvyPlaceholdersPopover>
  </IvyFormItem>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import IvyFormItem from '@/views/_components/form/IvyFormItem.vue'
import IvyTextInput from '@/views/_components/input/IvyTextInput.vue'
import IvyPlaceholdersPopover from '@/views/_components/popover/IvyPlaceholdersPopover.vue'
import IvyTooltip from '@/views/_components/tooltip/IvyTooltip.vue'
import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
import { useLabels } from '@/composables/useLabels'
import { useInsertPlaceholderAtCursor } from '@/composables/useInsertPlaceholderAtCursor'
import type {
  GeneralPlaceholderItem,
  PlaceholderPopoverFieldSource,
} from '@/composables/useFormFieldPlaceholders'

interface Props {
  label: string
  modelValue?: string
  inputType?: 'text' | 'textarea'
  inputPlaceholder?: string
  /** When true, popover shows only General placeholders (field builder). */
  generalOnly?: boolean
  /** Optional field list for popover; defaults to form builder store fields. */
  fields?: PlaceholderPopoverFieldSource[]
  /** Optional general list for popover; defaults to all general placeholders. */
  general?: GeneralPlaceholderItem[]
  formItemSecondary?: boolean
  formItemProp?: string
  inputSecondary?: boolean
}

withDefaults(defineProps<Props>(), {
  modelValue: '',
  inputType: 'text',
  generalOnly: false,
  formItemSecondary: true,
  inputSecondary: false,
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  blur: [event: FocusEvent]
}>()

const { getLabel } = useLabels()
const inputRef = ref<InstanceType<typeof IvyTextInput> | null>(null)

const handleInsertPlaceholder = useInsertPlaceholderAtCursor(inputRef, (newValue) => {
  emit('update:modelValue', newValue)
})
</script>

<style scoped lang="scss">
.ivyforms-input-with-placeholders__popover {
  position: absolute;
  right: 10px;
  bottom: -3px;
  z-index: 1;

  &:has(.el-popover:not([style*='display: none'])) {
    z-index: 1000;
  }
}
</style>
