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

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

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

const LiveImage = "LiveImage";

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

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