import { keyInObject } from '../utils'

const SKIP_STYLES = new Set([
    'borderCurve',
    'elevation',
    'textAlignVertical',
    'includeFontPadding',
    'overlayColor',
    'tintColor',
])

const CSS_NUMBER_KEYS = new Set([
    'animationIterationCount',
    'borderImageOutset',
    'borderImageSlice',
    'borderImageWidth',
    'boxFlex',
    'boxFlexGroup',
    'boxOrdinalGroup',
    'columnCount',
    'columns',
    'counterIncrement',
    'counterReset',
    'flex',
    'flexGrow',
    'flexPositive',
    'flexShrink',
    'flexNegative',
    'flexOrder',
    'fontWeight',
    'gridArea',
    'gridColumn',
    'gridColumnEnd',
    'gridColumnSpan',
    'gridColumnStart',
    'gridRow',
    'gridRowEnd',
    'gridRowSpan',
    'gridRowStart',
    'line-clamp',
    'line-height',
    'opacity',
    'order',
    'orphans',
    'tabSize',
    'widows',
    'zIndex',
    'zoom',
    'fillOpacity',
    'floodOpacity',
    'stopOpacity',
    'strokeDasharray',
    'strokeDashoffset',
    'strokeMiterlimit',
    'strokeOpacity',
    'strokeWidth',
    'aspectRatio',
])

const convertMap = {
    marginHorizontal: (value: number) => ({
        marginInline: value,
    }),
    marginVertical: (value: number) => ({
        marginBlock: value,
    }),
    paddingHorizontal: (value: number) => ({
        paddingInline: value,
    }),
    paddingVertical: (value: number) => ({
        paddingBlock: value,
    }),
    writingDirection: (value: string) => ({
        direction: value,
    }),
    borderBottomEndRadius: (value: number) => ({
        borderBottomRightRadius: value,
    }),
    borderBottomStartRadius: (value: number) => ({
        borderBottomLeftRadius: value,
    }),
    borderEndColor: (value: string) => ({
        borderInlineEndColor: value,
    }),
    borderStartColor: (value: string) => ({
        borderInlineStartColor: value,
    }),
    borderTopEndRadius: (value: number) => ({
        borderTopRightRadius: value,
    }),
    borderTopStartRadius: (value: number) => ({
        borderTopLeftRadius: value,
    }),
    borderEndWidth: (value: number) => ({
        borderInlineEndWidth: value,
    }),
    borderStartWidth: (value: number) => ({
        borderInlineStartWidth: value,
    }),
    end: (value: number) => ({
        insetInlineEnd: value,
    }),
    start: (value: number) => ({
        insetInlineStart: value,
    }),
    marginEnd: (value: number) => ({
        marginInlineEnd: value,
    }),
    marginStart: (value: number) => ({
        marginInlineStart: value,
    }),
    paddingEnd: (value: number) => ({
        paddingInlineEnd: value,
    }),
    paddingStart: (value: number) => ({
        paddingInlineStart: value,
    }),
    transformMatrix: (value: Array<number>) => ({
        transform: `matrix(${value.join(', ')})`,
    }),
    resizeMode: (value: string) => ({
        backgroundSize: value,
    }),
} as Record<PropertyKey, (value: any) => Record<string, any>>

const convertNumber = (key: string, value: any) => {
    if (typeof value === 'number') {
        return CSS_NUMBER_KEYS.has(key) ? value : `${value}px`
    }

    return value
}

export const getStyle = (key: string, value: any) => {
    if (SKIP_STYLES.has(key)) {
        return {}
    }

    if (keyInObject(convertMap, key)) {
        return convertMap[key]?.(convertNumber(key, value)) ?? {}
    }

    return {
        [key]: convertNumber(key, value),
    }
}