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

const viewTree = (state, styles) => [
  {
    type: "View",
    style: {
      flex: 1,
      aspectRatio: 2.4,
      padding: 10,
    },
    elements: [
      {
        type: "View",
        style: {
          flex: 1,
          backgroundColor:
            state === "selected"
              ? getColor(ACTIVE_COLOR, styles)
              : getColor(BACKGROUND_COLOR, styles),
          borderRadius: 4,
          overflow: "hidden",
        },
        elements: [
          {
            type: "View",
            elements: [
              {
                type: "Image",
                style: {
                  aspectRatio: 3.2,
                  backgroundColor: getColor(BACKGROUND_COLOR, styles),
                },
                data: [
                  {
                    func: "image_src_from_media_item",
                    args: ["thumbnail-small"],
                    propName: "uri",
                  },
                ],
              },
            ],
          },
          {
            type: "View",
            elements: [
              {
                type: "Text",
                style: {
                  paddingHorizontal: "6%",
                  paddingTop: "3%",
                  fontSize: 26,
                  lineHeight: 32,
                  color:
                    state === "selected"
                      ? getColor(FOCUSED_TEXT_COLOR, styles)
                      : getColor(MAIN_TEXT_COLOR, styles),
                  fontWeight: "700",
                },
                data: [
                  {
                    func: "path",
                    args: ["title"],
                    propName: "label",
                  },
                ],
                additionalProps: {
                  numberOfLines: 1,
                },
              },
            ],
          },
        ],
      },
    ],
  },
];

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