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

function containerStyle(state) {
  return {
    margin: 12,
    width: 169,
    backgroundColor: state === "default" ? "transparent" : "#CCC",
    opacity: state === "default" ? 1.0 : 0.6,
  };
}

const cellStyles = {
  image: {
    borderRadius: 3,
    width: 169,
    height: 80,
  },
  title: {
    fontFamily: "HelveticaNeue-Light",
    fontSize: 16,
    color: "#000",
    padding: 3,
  },
};

const viewTree = (state, _styles) => [
  {
    type: View,
    style: containerStyle(state),
    elements: [
      {
        type: Image,
        style: cellStyles.image,
        data: [
          {
            func: "image_src_from_media_item",
            args: ["thumbnail-small"],
            propName: "uri",
          },
        ],
      },
      {
        type: View,
        elements: [
          {
            type: Text,
            style: cellStyles.title,
            data: [
              {
                func: "path",
                args: ["title"],
                propName: "label",
              },
            ],
            additionalProps: {
              numberOfLines: 2,
              ellipsizeMode: "tail",
            },
          },
        ],
      },
    ],
  },
];

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