import {
  compact,
  ifElseFocusedSelected,
  ifElseSelected,
} from "@applicaster/zapp-react-native-utils/cellUtils";
import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";

import { getPositionStyles } from "./utils";

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

type Props = {
  value: Function;
  state: string;
  visible?: Boolean;
  isMobile?: Boolean;
};

export const CellBadge = ({
  value,
  state,
  visible = true,
  isMobile = false,
}: Props) => {
  if (!value("cell_badge_switch") || !visible) {
    return null;
  }

  const position = value("cell_badge_position");

  return {
    type: View, // Cell badge view
    style: {
      flex: platformSelect({
        tvos: 0,
        android_tv: 0,
        default: 1,
      }),
      position: "absolute",
      ...getPositionStyles(position, {
        width: value("cell_badge_width"),
        height: value("cell_badge_height"),
      }),
      marginTop: value("cell_badge_margin_top"),
      marginRight: value("cell_badge_margin_right"),
      marginBottom: value("cell_badge_margin_bottom"),
      marginLeft: value("cell_badge_margin_left"),
    },
    elements: compact([
      {
        type: Image, // Cell badge
        style: {
          width: value("cell_badge_width"),
          height: value("cell_badge_height"),
        },
        data: [
          {
            func: () => {
              return isMobile
                ? ifElseSelected(
                    state,
                    value("cell_badge_selected"),
                    value("cell_badge_default")
                  )
                : ifElseFocusedSelected(
                    state,
                    value("cell_badge_focused"),
                    value("cell_badge_selected"),
                    value("cell_badge_focused_selected"),
                    value("cell_badge_default")
                  );
            },
            args: [],
            propName: "uri",
          },
        ],
        additionalProps: {
          resizeMode: "cover",
        },
      },
    ]),
  };
};