utils.ts

import {
  YGAlign,
  YGBoxSizing,
  YGDirection,
  YGDisplay,
  YGFlexDirection,
  YGJustify,
  YGOverflow,
  YGPositionType,
  YGUnit,
  YGWrap,
  PointerFilterMode
} from '@dcl/ecs'
import {
  AlignType,
  BoxSizingType,
  DirectionType,
  FlexDirectionType,
  DisplayType,
  FlexWrapType,
  GapShorthand,
  JustifyType,
  OverflowType,
  Position,
  PositionType,
  PositionUnit,
  PositionShorthand,
  PointerFilterType,
  BorderRadius,
  UiTransformProps
} from './types'
import { calcOnViewport, getUiScaleFactor } from '../utils'
import { ScaleUnit } from '../types'
import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen'

function capitalize<T extends string>(value: T): Capitalize<T> {
  return `${value[0].toUpperCase()}${value.slice(1, value.length)}` as Capitalize<T>
}

type PropName = 'position' | 'margin' | 'padding' | 'borderWidth'
type PropKey = `${PropName}${Capitalize<keyof Position>}`
type PropKeyUnit = `${PropName}${Capitalize<keyof Position>}Unit`
type PositionParsed = {
  [key in PropKey]?: number
} & {
  [key in PropKeyUnit]?: YGUnit
}

function isPercent(val: PositionUnit) {
  return typeof val === 'string' && val.endsWith('%')
}

function isPoint(val: PositionUnit) {
  return typeof val === 'string' && val.endsWith('px')
}

function isVw(val: PositionUnit): val is ScaleUnit {
  return typeof val === 'string' && val.endsWith('vw')
}

function isVh(val: PositionUnit): val is ScaleUnit {
  return typeof val === 'string' && val.endsWith('vh')
}

function scalePixelValue(value: number): number {
  return value * getUiScaleFactor()
}

function parsePositionUnit(val?: PositionUnit | 'auto'): [number | undefined, YGUnit] {
  function getValue(key: 'px' | '%' | 'vw' | 'vh', value: string) {
    return Number(value.slice(0, value.indexOf(key)))
  }

  if (val === undefined || val === null) {
    return [undefined, YGUnit.YGU_UNDEFINED]
  }

  if (val === 'auto') {
    return [0, YGUnit.YGU_AUTO]
  }

  if (typeof val === 'number' || (typeof val === 'string' && !isNaN(Number(val)))) {
    return [scalePixelValue(Number(val)), YGUnit.YGU_POINT]
  }

  if (isPercent(val)) {
    return [getValue('%', val), YGUnit.YGU_PERCENT]
  }

  if (isPoint(val)) {
    return [scalePixelValue(getValue('px', val)), YGUnit.YGU_POINT]
  }

  if (isVw(val) || isVh(val)) {
    return [calcOnViewport(val), YGUnit.YGU_POINT]
  }

  return [undefined, YGUnit.YGU_UNDEFINED]
}

type BorderProp = `border${Capitalize<keyof BorderRadius>}Radius`
type BorderPropUnit = `${BorderProp}Unit`
type BorderProps = {
  [key in BorderProp]?: number
} & {
  [key in BorderPropUnit]?: YGUnit
}
export function parseBorderRadius(radius: Partial<BorderRadius> | PositionUnit): BorderProps | undefined {
  if (typeof radius === 'object') {
    const obj: Partial<BorderProps> = {}
    for (const key in radius) {
      const typedKey: keyof BorderRadius = key as keyof BorderRadius
      const propKey: BorderProp = `border${capitalize(typedKey)}Radius`
      const propKeyUnit: BorderPropUnit = `${propKey}Unit`
      const [value, unit] = parsePositionUnit(radius[typedKey]!)
      if (value === undefined) continue
      obj[propKeyUnit] = unit
      obj[propKey] = value
    }
    return obj
  }

  if (typeof radius === 'number') {
    return parseBorderRadius({ topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius })
  }
}

type BorderKey = Record<keyof Position, number>
type BorderWidthProp = `border${Capitalize<keyof BorderKey>}Width`
type BorderWidthPropUnit = `${BorderWidthProp}Unit`
type BorderWidthProps = {
  [key in BorderWidthProp]?: number
} & {
  [key in BorderWidthPropUnit]?: YGUnit
}
export function parseBorderWidth(borderWidth: Partial<Position> | PositionUnit): BorderWidthProps | undefined {
  if (typeof borderWidth === 'object') {
    const obj: Partial<BorderWidthProps> = {}
    for (const key in borderWidth) {
      const typedKey: keyof Position = key as keyof Position
      const propKey: BorderWidthProp = `border${capitalize(typedKey)}Width`
      const propKeyUnit: BorderWidthPropUnit = `${propKey}Unit`
      const [value, unit] = parsePositionUnit(borderWidth[typedKey]!)
      if (value === undefined) continue
      obj[propKeyUnit] = unit
      obj[propKey] = value
    }
    return obj
  }

  if (typeof borderWidth === 'number') {
    return parseBorderWidth({ top: borderWidth, left: borderWidth, right: borderWidth, bottom: borderWidth })
  }
}
type BorderColor = Record<keyof Position, Color4>
type BorderColorKey = `border${Capitalize<keyof BorderColor>}Color`

const isColor = (v: unknown): v is Color4 => {
  if ((v as Color4).b !== undefined) return true
  return false
}
export function parseBorderColor(
  borderColor: UiTransformProps['borderColor']
): Record<BorderColorKey, Color4> | undefined {
  if (isColor(borderColor)) {
    return parseBorderColor({ top: borderColor, left: borderColor, right: borderColor, bottom: borderColor })
  }

  if (typeof borderColor === 'object') {
    const obj: Record<BorderColorKey, Color4> = {} as Record<BorderColorKey, Color4>
    for (const key in borderColor) {
      const typedKey: keyof BorderColor = key as keyof BorderColor
      const propKey: BorderColorKey = `border${capitalize(typedKey)}Color`
      obj[propKey] = borderColor[typedKey]
    }
    return obj
  }
}

export function parsePosition<T extends PropName>(
  position: Partial<Position> | PositionShorthand = {},
  prop: T
): Partial<PositionParsed> {
  if (typeof position === 'object') {
    const obj: Partial<PositionParsed> = {}
    for (const key in position) {
      const typedKey: keyof Position = key as keyof Position
      const propKey: PropKey = `${prop}${capitalize(typedKey)}`
      const propKeyUnit: PropKeyUnit = `${prop}${capitalize(typedKey)}Unit`
      const [value, unit] = parsePositionUnit(position[typedKey]!)
      if (value === undefined) continue
      obj[propKeyUnit] = unit
      obj[propKey] = value
    }
    return obj
  }
  if (typeof position === 'number') {
    return parsePosition({ top: position, left: position, right: position, bottom: position }, prop)
  }
  const values = position.split(' ').filter((a) => a !== '') as PositionUnit[]

  if (values.length === 1) {
    const [value] = values
    return parsePosition({ top: value, left: value, right: value, bottom: value }, prop)
  }

  if (values.length === 2) {
    const [topBottom, rigthLeft] = values
    return parsePosition({ top: topBottom, left: rigthLeft, right: rigthLeft, bottom: topBottom }, prop)
  }

  if (values.length === 3) {
    const [top, rigthLeft, bottom] = values
    return parsePosition({ top, left: rigthLeft, right: rigthLeft, bottom }, prop)
  }

  const [top, right, bottom, left] = values
  return parsePosition({ top, right, bottom, left }, prop)
}

type GapProp = 'gap' | 'rowGap' | 'columnGap'
type GapPropUnit = `${GapProp}Unit`
type GapProps = {
  [key in GapProp]?: number
} & {
  [key in GapPropUnit]?: YGUnit
}
/**
 * @internal
 */
export function parseGap(
  gap: GapShorthand | undefined,
  rowGap: PositionUnit | undefined,
  columnGap: PositionUnit | undefined
): Partial<GapProps> {
  const obj: Partial<GapProps> = {}

  function setGap(prop: GapProp, val: PositionUnit | undefined) {
    const [value, unit] = parsePositionUnit(val)
    if (value === undefined) return
    obj[prop] = value
    obj[`${prop}Unit`] = unit
  }

  if (typeof gap === 'string') {
    const values = gap.split(' ').filter((a) => a !== '') as PositionUnit[]
    if (values.length >= 2) {
      setGap('rowGap', values[0])
      setGap('columnGap', values[1])
    } else {
      setGap('gap', values[0])
    }
  } else {
    setGap('gap', gap)
  }

  // longhands win over the shorthand; Yoga resolves row/column precedence over the all-gutter
  setGap('rowGap', rowGap)
  setGap('columnGap', columnGap)

  return obj
}

// Size Props
type HeightWidth = 'height' | 'width'
type SizePropName = HeightWidth | `max${Capitalize<HeightWidth>}` | `min${Capitalize<HeightWidth>}`
type SizePropKeyUnit = `${SizePropName}Unit`
type SizeReturnType = {
  [key in SizePropName]: number
} & { [key in SizePropKeyUnit]: YGUnit }
export function parseSize(val: PositionUnit | 'auto' | undefined, key: SizePropName): Partial<SizeReturnType> {
  const unitKey: SizePropKeyUnit = `${key}Unit`
  const [value, unit] = parsePositionUnit(val)

  if (value === undefined) return {}

  return {
    [key]: value,
    [unitKey]: unit
  }
}

/**
 * @internal
 */
export function getDisplay(display: DisplayType | undefined): Record<'display', YGDisplay> {
  const value: YGDisplay = display ? parseDisplay[display] : YGDisplay.YGD_FLEX
  return { display: value }
}
const parseDisplay: Readonly<Record<DisplayType, YGDisplay>> = {
  flex: YGDisplay.YGD_FLEX,
  none: YGDisplay.YGD_NONE
}
/**
 * @internal
 */
export function getJustify(justify: JustifyType | undefined): Record<'justifyContent', YGJustify> {
  const value: YGJustify = justify ? parseJustify[justify] : YGJustify.YGJ_FLEX_START
  return { justifyContent: value }
}
const parseJustify: Readonly<Record<JustifyType, YGJustify>> = {
  center: YGJustify.YGJ_CENTER,
  'flex-end': YGJustify.YGJ_FLEX_END,
  'flex-start': YGJustify.YGJ_FLEX_START,
  'space-around': YGJustify.YGJ_SPACE_AROUND,
  'space-between': YGJustify.YGJ_SPACE_BETWEEN,
  'space-evenly': YGJustify.YGJ_SPACE_EVENLY
}

type AlignProp = 'alignContent' | 'alignItems' | 'alignSelf'
/**
 * @internal
 */
export function getAlign<T extends AlignProp>(prop: T, align: AlignType): Record<T, YGAlign> {
  const value: YGAlign = parseAligns[align]
  return { [prop]: value } as Record<T, YGAlign>
}

const parseAligns: Readonly<Record<AlignType, YGAlign>> = {
  auto: YGAlign.YGA_AUTO,
  baseline: YGAlign.YGA_BASELINE,
  center: YGAlign.YGA_CENTER,
  'flex-end': YGAlign.YGA_FLEX_END,
  'flex-start': YGAlign.YGA_FLEX_START,
  stretch: YGAlign.YGA_STRETCH,
  'space-between': YGAlign.YGA_SPACE_BETWEEN,
  'space-around': YGAlign.YGA_SPACE_AROUND
}

/**
 * @internal
 */
export function getFlexDirection(
  flexDirection: FlexDirectionType | undefined
): Record<'flexDirection', YGFlexDirection> {
  const value: YGFlexDirection = flexDirection ? parseFlexDirection[flexDirection] : YGFlexDirection.YGFD_ROW
  return { flexDirection: value }
}

const parseFlexDirection: Readonly<Record<FlexDirectionType, YGFlexDirection>> = {
  row: YGFlexDirection.YGFD_ROW,
  column: YGFlexDirection.YGFD_COLUMN,
  'row-reverse': YGFlexDirection.YGFD_ROW_REVERSE,
  'column-reverse': YGFlexDirection.YGFD_COLUMN_REVERSE
}

/**
 * @internal
 */
export function getFlexWrap(flexWrap: FlexWrapType): Record<'flexWrap', YGWrap> {
  const value: YGWrap = parseFlexWrap[flexWrap]
  return { flexWrap: value }
}

const parseFlexWrap: Readonly<Record<FlexWrapType, YGWrap>> = {
  wrap: YGWrap.YGW_WRAP,
  nowrap: YGWrap.YGW_NO_WRAP,
  'wrap-reverse': YGWrap.YGW_WRAP_REVERSE
}

/**
 * @internal
 */
export function getOverflow(overflow: OverflowType | undefined): Record<'overflow', YGOverflow> {
  const value: YGOverflow = overflow ? parseOverflow[overflow] : YGOverflow.YGO_VISIBLE
  return { overflow: value }
}

const parseOverflow: Readonly<Record<OverflowType, YGOverflow>> = {
  visible: YGOverflow.YGO_VISIBLE,
  scroll: YGOverflow.YGO_SCROLL,
  hidden: YGOverflow.YGO_HIDDEN
}

/**
 * @internal
 */
export function getPositionType(position: PositionType | undefined): Record<'positionType', YGPositionType> {
  const value: YGPositionType = position ? parsePositionType[position] : YGPositionType.YGPT_RELATIVE
  return { positionType: value }
}

const parsePositionType: Readonly<Record<PositionType, YGPositionType>> = {
  relative: YGPositionType.YGPT_RELATIVE,
  absolute: YGPositionType.YGPT_ABSOLUTE
}

/**
 * @internal
 */
export function getPointerFilter(
  pointerFilter: PointerFilterType | undefined
): Record<'pointerFilter', PointerFilterMode> {
  const value: PointerFilterMode = pointerFilter ? parsePointerFilter[pointerFilter] : PointerFilterMode.PFM_NONE
  return { pointerFilter: value }
}

const parsePointerFilter: Readonly<Record<PointerFilterType, PointerFilterMode>> = {
  none: PointerFilterMode.PFM_NONE,
  block: PointerFilterMode.PFM_BLOCK
}

/**
 * @internal
 */
export function getDirection(direction: DirectionType): Record<'direction', YGDirection> {
  return { direction: parseDirection[direction] }
}

const parseDirection: Readonly<Record<DirectionType, YGDirection>> = {
  inherit: YGDirection.YGDIR_INHERIT,
  ltr: YGDirection.YGDIR_LTR,
  rtl: YGDirection.YGDIR_RTL
}

/**
 * @internal
 */
export function getBoxSizing(boxSizing: BoxSizingType): Record<'boxSizing', YGBoxSizing> {
  return { boxSizing: parseBoxSizing[boxSizing] }
}

const parseBoxSizing: Readonly<Record<BoxSizingType, YGBoxSizing>> = {
  'border-box': YGBoxSizing.YGBS_BORDER_BOX,
  'content-box': YGBoxSizing.YGBS_CONTENT_BOX
}