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

export function applyFieldLabelStyles(
  css: string[],
  baseSelector: string,
  styleSettings: FormStyleSettings,
  activeColors: ActiveColors,
): void {
  const fieldLabelPaddingLR = formatDimensionToCss(
    styleSettings.advancedMode?.fieldLabels?.label?.paddingLeftRight,
  )
  const fieldLabelPaddingTB = formatDimensionToCss(
    styleSettings.advancedMode?.fieldLabels?.label?.paddingTopBottom,
  )
  const fieldLabelAlignment = styleSettings.advancedMode?.fieldLabels?.label?.alignment || 'left'
  const fieldLabelFontWeight = styleSettings.advancedMode?.fieldLabels?.label?.fontWeight
  const fieldLabelFontStyle = styleSettings.advancedMode?.fieldLabels?.label?.fontStyle
  const fieldLabelFontSize = formatDimensionToCss(
    styleSettings.advancedMode?.fieldLabels?.label?.fontSize,
  )

  if (
    activeColors.fieldLabels ||
    fieldLabelPaddingLR ||
    fieldLabelPaddingTB ||
    fieldLabelFontWeight ||
    fieldLabelFontStyle ||
    fieldLabelFontSize
  ) {
    css.push(`${baseSelector} .ivyforms-form-item__label,`)
    css.push(`${baseSelector} .el-form-item__label,`)
    css.push(`${baseSelector} .ivyforms-field__address-label,`)
    css.push(`${baseSelector} .ivyforms-name-field__label,`)
    css.push(`${baseSelector} .ivyforms-name-field__layout__field-wrapper__sublabel {`)
    if (activeColors.fieldLabels) {
      css.push(`  color: ${activeColors.fieldLabels} !important;`)
    }
    if (fieldLabelFontWeight) {
      css.push(`  font-weight: ${fieldLabelFontWeight} !important;`)
    }
    if (fieldLabelFontStyle) {
      css.push(`  font-style: ${fieldLabelFontStyle} !important;`)
    }
    if (fieldLabelFontSize) {
      css.push(`  font-size: ${fieldLabelFontSize} !important;`)
    }
    if (fieldLabelPaddingLR) {
      css.push(`  padding-left: ${fieldLabelPaddingLR} !important;`)
      css.push(`  padding-right: ${fieldLabelPaddingLR} !important;`)
    }
    if (fieldLabelPaddingTB) {
      css.push(`  padding-top: ${fieldLabelPaddingTB} !important;`)
      css.push(`  padding-bottom: ${fieldLabelPaddingTB} !important;`)
    }
    css.push('}')
  }

  if (fieldLabelAlignment !== 'left') {
    const justifyContent = fieldLabelAlignment === 'center' ? 'center' : 'flex-end'
    css.push(`${baseSelector} .ivyforms-form-item .el-form-item .el-form-item__label,`)
    css.push(`${baseSelector} .el-form-item__label,`)
    css.push(`${baseSelector} .ivyforms-field__address .el-form-item__label,`)
    css.push(`${baseSelector} .ivyforms-field__address-label,`)
    css.push(`${baseSelector} .ivyforms-name-field__label,`)
    css.push(`${baseSelector} .ivyforms-name-field__layout__field-wrapper__sublabel {`)
    css.push(`  display: flex !important;`)
    css.push(`  width: 100% !important;`)
    css.push(`  text-align: ${fieldLabelAlignment} !important;`)
    css.push(`  justify-content: ${justifyContent} !important;`)
    css.push(`}`)
  }

  const requiredIndicatorColor =
    styleSettings.advancedMode?.fieldLabels?.requiredIndicator?.fontColor || '#E53E3E'

  css.push(`${baseSelector} .ivyforms-form-item .ivyforms-form-item__asterisk,`)
  css.push(`${baseSelector} .ivyforms-form-item__asterisk,`)
  css.push(`${baseSelector} .el-form-item__label.is-required::before {`)
  css.push(`  color: ${requiredIndicatorColor} !important;`)
  css.push('}')
}