import { computed, type ComputedRef } from 'vue'
import { DEFAULT_FORM_STYLES } from '@/constants/defaultFormStyles'
import type { FormStyleSettings } from '@/types/form-style'

const FALLBACK_HORIZONTAL_SPACING = DEFAULT_FORM_STYLES.quickMode?.horizontalSpacing || '12px'

export function resolveHorizontalSpacing(
  styleSettings?: FormStyleSettings | null,
  fallback: string = FALLBACK_HORIZONTAL_SPACING,
): string {
  if (!styleSettings) {
    return fallback
  }

  return (
    styleSettings.advancedMode?.general?.horizontalSpacing ||
    styleSettings.quickMode?.horizontalSpacing ||
    fallback
  )
}

export function useHorizontalSpacing(
  styleSettings: ComputedRef<FormStyleSettings | null | undefined>,
  fallback: string = FALLBACK_HORIZONTAL_SPACING,
) {
  return computed(() => resolveHorizontalSpacing(styleSettings.value, fallback))
}