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

const Image = "Image";
const View = "View";
const Text = "Text";

const containerStyles = (styles) => ({
  flex: 1,
  flexDirection: "column",
  width: 1280,
  height: 436,
  borderRadius: 4,
  backgroundColor: getColor(BACKGROUND_COLOR, styles),
  marginRight: 48,
  marginBottom: 48,
});

const focusedContainerStyles = (styles) => ({
  ...containerStyles(styles),
  backgroundColor: getColor(ACTIVE_COLOR, styles),
});

const imageStyle = {
  width: 1280,
  height: 352,
  borderTopRightRadius: 4,
  borderTopLeftRadius: 4,
};

const titleContainerStyles = {
  width: 1184,
  height: 60,
  marginHorizontal: 24,
  marginTop: 24,
  overflow: "hidden",
};

const titleStyles = (styles) => ({
  fontSize: 26,
  color: getColor(MAIN_TEXT_COLOR, styles),
  fontWeight: "bold",
  fontStyle: "normal",
});

const focusedTitleStyles = (styles) => ({
  ...titleStyles(styles),
  color: getColor(FOCUSED_TEXT_COLOR, styles),
});

const viewTree = (state, styles) => [
  {
    type: View,
    style:
      state === "focused"
        ? focusedContainerStyles(styles)
        : containerStyles(styles),
    elements: [
      {
        type: Image,
        style: imageStyle,
        data: [
          {
            func: "image_src_from_media_item",
            args: ["thumbnail-small"],
            propName: "uri",
          },
        ],
      },
      {
        type: View,
        style: titleContainerStyles,
        elements: [
          {
            type: Text,
            style:
              state === "focused"
                ? focusedTitleStyles(styles)
                : titleStyles(styles),
            data: [
              {
                func: "path",
                args: ["title"],
                propName: "label",
              },
            ],
            additionalProps: {
              numberOfLines: 2,
            },
          },
        ],
      },
    ],
  },
];

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