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

const viewTree = (state, styles) => [
  {
    type: "View",
    style: {
      flex: 1,
      paddingTop: 14,
      paddingBottom: 14,
      paddingRight: 30,
    },
    elements: [
      {
        type: "View",
        elements: [
          {
            type: "Text",

            style: {
              paddingTop: "2%",
              paddingBottom: "2%",
              fontSize: 26,
              lineHeight: 32,
              color:
                state === "focused" || state === "selected"
                  ? getColor(FOCUSED_TEXT_COLOR, styles)
                  : getColor(MAIN_TEXT_COLOR, styles),
              fontWeight: "700",
            },
            data: [
              {
                func: "path",
                args: ["title"],
                propName: "label",
              },
            ],
            additionalProps: {
              numberOfLines: 2,
            },
          },
          {
            type: "View",
            style: {
              height: 10,
              alignItems: "center",
              justifyContent: "center",
              borderColor:
                state === "focused"
                  ? getColor(ACTIVE_COLOR, styles)
                  : "transparent",
              borderBottomWidth: 6,
            },
          },
        ],
      },
    ],
  },
];

export const ScreenSelectorLabel = (styles) => ({
  content_types: {
    default: {
      states: {
        default: viewTree("default", styles),
        focused: viewTree("focused", styles),
        selected: viewTree("selected", styles),
      },
    },
  },
});