const colors = {
  backgroundColor: {
    property: 'backgroundColor',
    scale: 'colors',
  },
  bgColor: {
    property: 'backgroundColor',
    scale: 'colors',
  },
  borderColor: {
    property: 'borderColor',
    scale: 'colors',
  },
  borderTopColor: {
    property: 'borderTopColor',
    scale: 'colors',
  },
  borderBottomColor: {
    property: 'borderBottomColor',
    scale: 'colors',
  },
  borderStartColor: {
    property: 'borderStartColor',
    scale: 'colors',
  },
  borderEndColor: {
    property: 'borderEndColor',
    scale: 'colors',
  },
  borderLeftColor: {
    property: 'borderLeftColor',
    scale: 'colors',
  },
  borderRightColor: {
    property: 'borderRightColor',
    scale: 'colors',
  },
} as const;

const space = {
  margin: {
    property: 'margin',
    scale: 'space',
  },
  marginBottom: {
    property: 'marginBottom',
    scale: 'space',
  },
  marginEnd: {
    property: 'marginEnd',
    scale: 'space',
  },
  marginHorizontal: {
    property: 'marginHorizontal',
    scale: 'space',
  },
  marginLeft: {
    property: 'marginLeft',
    scale: 'space',
  },
  marginRight: {
    property: 'marginRight',
    scale: 'space',
  },
  marginStart: {
    property: 'marginStart',
    scale: 'space',
  },
  marginTop: {
    property: 'marginTop',
    scale: 'space',
  },
  marginVertical: {
    property: 'marginVertical',
    scale: 'space',
  },
  padding: {
    property: 'padding',
    scale: 'space',
  },
  paddingBottom: {
    property: 'paddingBottom',
    scale: 'space',
  },
  paddingEnd: {
    property: 'paddingEnd',
    scale: 'space',
  },
  paddingHorizontal: {
    property: 'paddingHorizontal',
    scale: 'space',
  },
  paddingLeft: {
    property: 'paddingLeft',
    scale: 'space',
  },
  paddingRight: {
    property: 'paddingRight',
    scale: 'space',
  },
  paddingStart: {
    property: 'paddingStart',
    scale: 'space',
  },
  paddingTop: {
    property: 'paddingTop',
    scale: 'space',
  },
  paddingVertical: {
    property: 'paddingVertical',
    scale: 'space',
  },
  gap: {
    property: 'gap',
    scale: 'space',
  },
} as const;

const radii = {
  borderBottomEndRadius: {
    property: 'borderBottomEndRadius',
    scale: 'radii',
  },
  borderBottomLeftRadius: {
    property: 'borderBottomLeftRadius',
    scale: 'radii',
  },
  borderBottomRightRadius: {
    property: 'borderBottomRightRadius',
    scale: 'radii',
  },
  borderBottomStartRadius: {
    property: 'borderBottomStartRadius',
    scale: 'radii',
  },
  borderTopEndRadius: {
    property: 'borderTopEndRadius',
    scale: 'radii',
  },
  borderTopLeftRadius: {
    property: 'borderTopLeftRadius',
    scale: 'radii',
  },
  borderTopRightRadius: {
    property: 'borderTopRightRadius',
    scale: 'radii',
  },
  borderTopStartRadius: {
    property: 'borderTopStartRadius',
    scale: 'radii',
  },
  borderRadius: {
    property: 'borderRadius',
    scale: 'radii',
  },
} as const;

const borderWidths = {
  borderWidth: {
    property: 'borderWidth',
    scale: 'borderWidths',
  },
  borderBottomWidth: {
    property: 'borderBottomWidth',
    scale: 'borderWidths',
  },
  borderTopWidth: {
    property: 'borderTopWidth',
    scale: 'borderWidths',
  },
  borderLeftWidth: {
    property: 'borderLeftWidth',
    scale: 'borderWidths',
  },
  borderRightWidth: {
    property: 'borderRightWidth',
    scale: 'borderWidths',
  },
} as const;

const config = {
  ...colors,
  ...space,
  ...radii,
  ...borderWidths,
} as const;

export const flexPropsKey = [
  'alignContent',
  'alignItems',
  'alignSelf',
  'display',
  'flex',
  'flexBasis',
  'flexDirection',
  'flexGrow',
  'flexShrink',
  'flexWrap',
  'justifyContent',
] as const;

export type ConfigType = typeof config;
export type FlexPropsKeyType = typeof flexPropsKey[number];

export default config;