import type { CSSProperties } from 'vue'
import type { Radius, RadiusDouble, RadiusPrimitive } from '../types'
import { isCorners } from './is'

function stringify(radius: RadiusPrimitive | RadiusDouble | undefined): string | undefined {
  if (radius == null) {
    return undefined
  }
  if (Array.isArray(radius)) {
    return radius.map(stringify).join(' ')
  }
  return `${radius}px`
}

export function radii(radius: Radius | undefined): CSSProperties | undefined {
  if (radius == null) {
    return undefined
  }
  if (isCorners(radius)) {
    return {
      borderTopLeftRadius: stringify(radius.topLeft),
      borderTopRightRadius: stringify(radius.topRight),
      borderBottomLeftRadius: stringify(radius.bottomLeft),
      borderBottomRightRadius: stringify(radius.bottomRight),
    }
  }
  return {
    borderRadius: stringify(radius as RadiusPrimitive),
  }
}