export interface FormContainerStyleParams {
  formId: string | number
  baseSelector: string
  formSelector: string
  formBackground: string
  formBorderColor?: string
  formBorderWidth: string
  formBorderStyle: string
  formCornerRadius?: string
  formPaddingTopBottom: string
  formPaddingLeftRight: string
  formAlignment: string
  verticalSpacing: string
  horizontalSpacing: string
}

export function applyFormContainerStyles(
  css: string[],
  {
    formId,
    baseSelector,
    formSelector,
    formBackground,
    formBorderColor,
    formBorderWidth,
    formBorderStyle,
    formCornerRadius,
    formPaddingTopBottom,
    formPaddingLeftRight,
    formAlignment,
    verticalSpacing,
    horizontalSpacing,
  }: FormContainerStyleParams,
): void {
  css.push(`${baseSelector} {`)
  if (formBackground) {
    css.push(`  background-color: ${formBackground} !important;`)
  }
  if (formBorderColor && formBorderWidth) {
    css.push(`  border: ${formBorderWidth} ${formBorderStyle} ${formBorderColor} !important;`)
  } else {
    css.push('  border: none !important;')
  }
  if (formCornerRadius) {
    css.push(`  border-radius: ${formCornerRadius} !important;`)
  } else {
    css.push('  border-radius: 0 !important;')
  }
  css.push('  box-shadow: none !important;')
  css.push(`  padding: ${formPaddingTopBottom} ${formPaddingLeftRight};`)
  if (formAlignment !== 'left') {
    css.push(`  display: flex;`)
    css.push(`  flex-direction: column;`)
    if (formAlignment === 'center') {
      css.push(`  align-items: center;`)
    } else if (formAlignment === 'right') {
      css.push(`  align-items: flex-end;`)
    }
  }
  css.push('}')

  css.push(`.ivyforms-form-wrapper.ivyforms-form-wrapper-${formId} {`)
  css.push('  border: none !important;')
  css.push('  box-shadow: none !important;')
  css.push('  background: transparent !important;')
  css.push('  padding: 0 !important;')
  css.push('}')

  css.push(`.ivyforms-form-wrapper-${formId} form, ${baseSelector} ${formSelector} {`)
  css.push('  border: none !important;')
  css.push('  box-shadow: none !important;')
  css.push('  background: transparent !important;')
  css.push('  display: flex !important;')
  css.push('  flex-direction: column !important;')
  css.push(`  gap: ${verticalSpacing} ${horizontalSpacing} !important;`)
  css.push('}')

  css.push(
    `.ivyforms-form-wrapper-${formId} form .ivyforms-form-row, ${baseSelector} ${formSelector} .ivyforms-form-row {`,
  )
  css.push(`  gap: ${horizontalSpacing} !important;`)
  css.push('}')
}