import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
import * as R from "ramda";
import * as React from "react";
import { Text, View } from "react-native";

import { DEFAULT_STYLE_NAMESPACE, styleKeys } from "../utils";

import {
  FOCUSED_TEXT_COLOR,
  MAIN_TEXT_COLOR,
  getColor,
} from "../colors/index.ios";

type BuilderProps = {
  style: any;
};

type Props = {
  item: {
    title: string;
  };
  state: string;
};

const labelStyles = (styles, state) => ({
  textContainer: {
    marginBottom: 10,
    marginLeft: 110,
    height: 60,
    flex: 1,
  },
  text: {
    fontSize: styles.fontSize || 34,
    fontWeight: "bold",
    fontStyle: "normal",
    color:
      state === "focused"
        ? getColor(FOCUSED_TEXT_COLOR, styles)
        : styles.color || getColor(MAIN_TEXT_COLOR, styles),
  },
});

// Using the app's styles to inject default/focused text color
export function labelBuilder(styles: BuilderProps) {
  const platformKey = styleKeys.style_namespace;

  const color =
    R.path([DEFAULT_STYLE_NAMESPACE, "header_font_style", "color"], styles) ||
    R.path([platformKey, "header_font_style", "color"], styles);

  const fontSize =
    R.path(
      [DEFAULT_STYLE_NAMESPACE, "header_font_style", "font_size"],
      styles
    ) || R.path([platformKey, "header_font_style", "font_size"], styles);

  const fontFamily =
    R.path([DEFAULT_STYLE_NAMESPACE, "header_font_style", "font"], styles) ||
    R.path([platformKey, "header_font_style", "font"], styles);

  const header_styles = {
    fontSize: Number(fontSize),
    color: fixColorHexCode(color),
    fontFamily: fontFamily,
  };

  return function Label({ item: { title }, state }: Props) {
    const _styles = labelStyles(header_styles, state);

    return (
      <View style={_styles.textContainer}>
        <Text style={_styles.text}>{title}</Text>
      </View>
    );
  };
}