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: 0.880733945,
      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: 1.7782608696,
                  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: "6%",
                      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: 2,
                    },
                  },
                ],
              },
              {
                type: "View",
                style: {
                  paddingHorizontal: "6%",
                  paddingTop: "3%",
                },
                elements: [
                  {
                    type: "Text",
                    style: {
                      fontSize: 24,
                      color:
                        state === "selected"
                          ? getColor(FOCUSED_TEXT_COLOR, styles)
                          : getColor(MAIN_TEXT_COLOR, styles),
                      fontWeight: "400",
                    },
                    data: [
                      {
                        func: "path",
                        args: ["summary"],
                        propName: "label",
                      },
                    ],
                    additionalProps: {
                      numberOfLines: 1,
                    },
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

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