import type { FormStyleSettings } from '@/types/form-style'
import type { ActiveColors } from '@/utils/form-styles/styleSettings'
import { formatDimensionToCss } from '@/utils/styleUtils'

export function applyFormHeaderStyles(
  css: string[],
  formId: string | number,
  styleSettings: FormStyleSettings,
  activeColors: ActiveColors,
): void {
  const formTitlePaddingLR = formatDimensionToCss(
    styleSettings.advancedMode?.formTitle?.paddingLeftRight,
  )
  const formTitlePaddingTB = formatDimensionToCss(
    styleSettings.advancedMode?.formTitle?.paddingTopBottom,
  )
  const formTitleFontWeight = styleSettings.advancedMode?.formTitle?.fontWeight
  const formTitleFontStyle = styleSettings.advancedMode?.formTitle?.fontStyle
  const formTitleFontSize = formatDimensionToCss(styleSettings.advancedMode?.formTitle?.fontSize)

  if (
    activeColors.formTitleColor ||
    formTitlePaddingLR ||
    formTitlePaddingTB ||
    formTitleFontWeight ||
    formTitleFontStyle ||
    formTitleFontSize
  ) {
    css.push(`.ivyforms-form-wrapper-${formId} .ivyforms-form-title {`)
    if (activeColors.formTitleColor) {
      css.push(`  color: ${activeColors.formTitleColor} !important;`)
    }
    if (formTitleFontWeight) {
      css.push(`  font-weight: ${formTitleFontWeight} !important;`)
    }
    if (formTitleFontStyle) {
      css.push(`  font-style: ${formTitleFontStyle} !important;`)
    }
    if (formTitleFontSize) {
      css.push(`  font-size: ${formTitleFontSize} !important;`)
    }
    if (formTitlePaddingLR) {
      css.push(`  padding-left: ${formTitlePaddingLR};`)
      css.push(`  padding-right: ${formTitlePaddingLR};`)
    }
    if (formTitlePaddingTB) {
      css.push(`  padding-top: ${formTitlePaddingTB};`)
      css.push(`  padding-bottom: ${formTitlePaddingTB};`)
    }
    css.push('}')
  }

  const formDescriptionPaddingLR = formatDimensionToCss(
    styleSettings.advancedMode?.formDescription?.paddingLeftRight,
  )
  const formDescriptionPaddingTB = formatDimensionToCss(
    styleSettings.advancedMode?.formDescription?.paddingTopBottom,
  )
  const formDescriptionFontWeight = styleSettings.advancedMode?.formDescription?.fontWeight
  const formDescriptionFontStyle = styleSettings.advancedMode?.formDescription?.fontStyle
  const formDescriptionFontSize = formatDimensionToCss(
    styleSettings.advancedMode?.formDescription?.fontSize,
  )

  if (
    activeColors.formDescriptionColor ||
    formDescriptionPaddingLR ||
    formDescriptionPaddingTB ||
    formDescriptionFontWeight ||
    formDescriptionFontStyle ||
    formDescriptionFontSize
  ) {
    css.push(`.ivyforms-form-wrapper-${formId} .ivyforms-form-description {`)
    if (activeColors.formDescriptionColor) {
      css.push(`  color: ${activeColors.formDescriptionColor} !important;`)
    }
    if (formDescriptionFontWeight) {
      css.push(`  font-weight: ${formDescriptionFontWeight} !important;`)
    }
    if (formDescriptionFontStyle) {
      css.push(`  font-style: ${formDescriptionFontStyle} !important;`)
    }
    if (formDescriptionFontSize) {
      css.push(`  font-size: ${formDescriptionFontSize} !important;`)
    }
    if (formDescriptionPaddingLR) {
      css.push(`  padding-left: ${formDescriptionPaddingLR};`)
      css.push(`  padding-right: ${formDescriptionPaddingLR};`)
    }
    if (formDescriptionPaddingTB) {
      css.push(`  padding-top: ${formDescriptionPaddingTB};`)
      css.push(`  padding-bottom: ${formDescriptionPaddingTB};`)
    }
    css.push('}')
  }
}