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

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

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

const textContainerStyles = (styles) => ({
  flex: 1,
  flexDirection: "column",
  width: 384,
  height: 220,
  borderBottomLeftRadius: 4,
  borderBottomRightRadius: 4,
  backgroundColor: getColor(BACKGROUND_COLOR, styles),
});

const focusedTextContainerStyles = (styles) => ({
  ...textContainerStyles(styles),
  backgroundColor: getColor(ACTIVE_COLOR, styles),
});

const imageStyle = {
  width: 384,
  height: 216,
  borderTopRightRadius: 4,
  borderTopLeftRadius: 4,
};

const titleContainerStyles = {
  width: 336,
  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 subtitleContainerStyles = {
  width: 336,
  height: 88,
  marginHorizontal: 24,
  marginTop: 24,
  overflow: "hidden",
};

const subtitleStyles = (styles) => ({
  fontSize: 24,
  fontWeight: "normal",
  opacity: 0.8,
  color: getColor(MAIN_TEXT_COLOR, styles),
  fontStyle: "normal",
});

const focusedSubtitleStyles = (styles) => ({
  ...subtitleStyles(styles),
  color: getColor(FOCUSED_TEXT_COLOR, styles),
});

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

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