export const textStyleKeys = [
  'color',
  'fontFamily',
  'fontSize',
  'fontStyle',
  'fontWeight',
  'includeFontPadding',
  'fontVariant',
  'letterSpacing',
  'lineHeight',
  'textAlign',
  'textAlignVertical',
  'textDecorationColor',
  'textDecorationLine',
  'textDecorationStyle',
  'textShadowColor',
  'textShadowOffset',
  'textShadowRadius',
  'textTransform',
  'verticalAlign',
];

export const viewStyleKeys = [
  'backfaceVisibility',
  'backgroundColor',
  'borderBottomColor',
  'borderBlockColor',
  'borderBlockEndColor',
  'borderBlockStartColor',
  'borderBottomEndRadius',
  'borderBottomLeftRadius',
  'borderBottomRightRadius',
  'borderBottomStartRadius',
  'borderStartEndRadius',
  'borderStartStartRadius',
  'borderEndEndRadius',
  'borderEndStartRadius',
  'borderBottomWidth',
  'borderColor',
  'borderCurve',
  'borderEndColor',
  'borderLeftColor',
  'borderLeftWidth',
  'borderRadius',
  'borderRightColor',
  'borderRightWidth',
  'borderStartColor',
  'borderStyle',
  'borderTopColor',
  'borderTopEndRadius',
  'borderTopLeftRadius',
  'borderTopRightRadius',
  'borderTopStartRadius',
  'borderTopWidth',
  'borderWidth',
  'boxShadow',
  'cursor',
  'elevation',
  'filter',
  'opacity',
  'outlineColor',
  'outlineOffset',
  'outlineStyle',
  'outlineWidth',
  'pointerEvents',
];

export const imageStyleKeys = [
  ...viewStyleKeys,
  'tintColor',
  'resizeMode',
  'objectFit',
];

export const layoutStyleKeys = [
  'alignContent',
  'alignItems',
  'alignSelf',
  'aspectRatio',
  'borderBottomWidth',
  'borderEndWidth',
  'borderLeftWidth',
  'borderRightWidth',
  'borderStartWidth',
  'borderTopWidth',
  'borderWidth',
  'bottom',
  'boxSizing',
  'columnGap',
  'direction',
  'display',
  'end',
  'flex',
  'flexBasis',
  'flexDirection',
  'flexGrow',
  'flexShrink',
  'flexWrap',
  'gap',
  'height',
  'isolation',
  'justifyContent',
  'left',
  'margin',
  'marginBottom',
  'marginEnd',
  'marginHorizontal',
  'marginLeft',
  'marginRight',
  'marginStart',
  'marginTop',
  'marginVertical',
  'maxHeight',
  'maxWidth',
  'minHeight',
  'minWidth',
  'overflow',
  'padding',
  'paddingBottom',
  'paddingEnd',
  'paddingHorizontal',
  'paddingLeft',
  'paddingRight',
  'paddingStart',
  'paddingTop',
  'paddingVertical',
  'position',
  'right',
  'rowGap',
  'start',
  'top',
  'width',
  'zIndex',
];

export const getViewStyles = (
  styles: Record<string, any>,
  omitKeys?: string[]
) => {
  if (!Object.keys(styles).length) return {};
  const viewStyles = viewStyleKeys.reduce((acc: Record<string, any>, key) => {
    if (styles[key] && !omitKeys?.includes(key)) {
      if (key === 'borderRadius') {
        acc[key] = Number(styles[key]);
      } else {
        acc[key] = styles[key];
      }
    }
    return acc;
  }, {});
  return viewStyles;
};

export const getLayoutStyles = (
  styles: Record<string, any>,
  omitKeys?: string[]
) => {
  // flex should be always a number
  if (!Object.keys(styles).length) return {};
  const layoutStyles = layoutStyleKeys.reduce(
    (acc: Record<string, any>, key) => {
      if (styles[key] && !omitKeys?.includes(key)) {
        if (key === 'flex' || key === 'borderRadius') {
          acc[key] = Number(styles[key]);
        } else {
          acc[key] = styles[key];
        }
      }
      return acc;
    },
    {}
  );
  return layoutStyles;
};

export const getTextStyles = (styles: Record<string, any>) => {
  if (!Object.keys(styles).length) return {};
  const textStyles = textStyleKeys.reduce((acc: Record<string, any>, key) => {
    if (styles[key]) {
      acc[key] = styles[key];
    }
    return acc;
  }, {});
  return textStyles;
};

export const getImageStyles = (styles: Record<string, any>) => {
  if (!Object.keys(styles).length) return {};
  const imageStyles = imageStyleKeys.reduce((acc: Record<string, any>, key) => {
    if (styles[key]) {
      acc[key] = styles[key];
    }
    return acc;
  }, {});
  return imageStyles;
};

export const getImageWidthAndHeight = () => {
  return {};
  // return {
  //   width:
  //     styles.width ||
  //     customStyles.width ||
  //     styles.height ||
  //     customStyles.height,
  //   height:
  //     styles.height ||
  //     customStyles.height ||
  //     styles.width ||
  //     customStyles.width,
  // };
};