import type { MaybeRefOrGetter } from 'vue'
import { computed, toValue } from 'vue'
import type { Field } from '@/types/field'
import { getGeneralPlaceholders } from '@/constants/generalPlaceholders'

export type FieldPlaceholderItem = {
  label: string
  value: string
  type: string
  fieldIndex: number
}

export type GeneralPlaceholderItem = {
  key: string
  label: string
  value: string
}

export type PlaceholderPopoverFieldSource = Field | FieldPlaceholderItem

export function buildFieldPlaceholderItems(fields: Field[]): FieldPlaceholderItem[] {
  return fields.map((field) => ({
    label: field.label,
    value: `{{${field.type}_${field.fieldIndex}}}`,
    type: field.type,
    fieldIndex: field.fieldIndex,
  }))
}

export function useFormFieldPlaceholders(fieldsSource: MaybeRefOrGetter<Field[]>) {
  const fields = computed(() => toValue(fieldsSource))

  const fieldsPlaceholders = computed(() => buildFieldPlaceholderItems(fields.value))

  const generalPlaceholders = computed(() => getGeneralPlaceholders())

  const emailFieldsPlaceholders = computed(() =>
    fieldsPlaceholders.value.filter((item) => item.type === 'email'),
  )

  const adminEmailGeneralPlaceholders = computed(() =>
    generalPlaceholders.value.filter((item) => item.key === 'admin_email'),
  )

  return {
    fieldsPlaceholders,
    generalPlaceholders,
    emailFieldsPlaceholders,
    adminEmailGeneralPlaceholders,
  }
}