import { StyleProp, StyleSheet, TextStyle, ViewStyle } from "react-native";
import styleResolver from "react-native-web/dist/exports/StyleSheet/styleResolver";

import { createWebCssRule } from "../utils/stylesheet";

export type StyleSheetType = StyleProp<ViewStyle | TextStyle>;

const specialStyleRegistry = {};

const objectStyles = ["shadowOffset"];

const create = (styles: any) => {
  const names = Object.keys(styles);

  const specialStyles = {};

  // look for media queries and psuedo-selectors
  names.forEach((key) => {
    const currentStyles = styles[key];
    Object.keys(currentStyles).forEach((style) => {
      // check for object
      if (
        typeof currentStyles[style] === "object" &&
        !objectStyles.includes(style)
      ) {
        // add to CSS, should filter from rest of styles
        if (!specialStyles[key]) {
          specialStyles[key] = [];
        }
        specialStyles[key].push({ key: style, value: currentStyles[style] });
        delete styles[key][style];
      }
    });
  });

  const ids = StyleSheet.create(styles);
  // TODO can we generate additional ids here
  // and generate the media queries without using [data-id]?
  // TODO return here if native, or support?

  Object.keys(specialStyles).map((className) => {
    const styleParts = specialStyles[className];
    const rnId = ids[className];

    if (rnId) {
      specialStyleRegistry[rnId] = styleParts.map(({ key, value }) => {
        const { identifier, rule } = createWebCssRule(key, value);
        styleResolver.sheet.insert(rule, 2.2);

        return identifier;
      });
    }
  });

  return ids;
};

const resolveSpecialStyles = (style: StyleSheetType) => {
  if (!style) return null;

  const validStyles = [].concat(style).reduce<string[]>((acc, id) => {
    if (typeof id === "number") {
      return specialStyleRegistry[id]
        ? acc.concat(specialStyleRegistry[id])
        : acc;
    }

    return acc;
  }, []);

  return Array.from(new Set(validStyles)).join(" ").trim();
};

export default { ...StyleSheet, create, resolveSpecialStyles };