import * as React from "react";
import * as R from "ramda";

import { TouchableOpacity } from "react-native";
// import { SvgUri } from "react-native-svg";

import { connectToStore } from "@applicaster/zapp-react-native-redux";
import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";

import Image from "./Image";
import { masterCellLogger } from "../logger";
import { ActionButton } from "./ActionButton";

type Props = {
  item: ZappEntry;
  asset: {
    props: {};
    src: {
      active: string;
      inactive: string;
      [key: string]: string;
    };
    style: {};
    type: "Image" | "Svg" | "Lottie";
  };
  initiallyActive: boolean;
  action: {
    identifier: string;
    type: string;
  };
  style: {};
  plugins: [];
  testID?: string;
  accessibilityLabel?: string;
  cellUUID?: string;
};

// function Svg({
//   uri,
//   style,
//   ...props
// }: {
//   uri: {},
//   style: { width: Number, height: number },
// }) {
//   const width = style?.width;
//   const height = style?.height;

//   return <SvgUri width={width} height={height} uri={uri} />;
// }

const components = {
  Image,
};

function ButtonComponent(props: Props) {
  const asset = props?.asset;
  const item = props?.item;
  const action = props?.action;

  const assetType = asset?.type || "Image";

  const ButtonAsset = components[assetType];

  const actionContext = useActions(action?.identifier);

  // TODO: better handling of missing plugin
  if (!actionContext) {
    // eslint-disable-next-line no-console
    masterCellLogger.warning(
      `You're missing an action plugin(${action?.identifier}) required by your button.  \n Button can't be displayed`
    );

    return null;
  }

  // if the action context implements the initialEntryState function, it
  // means it uses the new Action Button API.
  if (typeof actionContext?.initialEntryState === "function") {
    return <ActionButton {...props} />;
  }

  const defaultIsSelected = R.includes(item, actionContext.state || []);

  const isSelected = actionContext?.masterCell?.isSelected
    ? actionContext?.masterCell?.isSelected(item)
    : defaultIsSelected;

  // TODO: additional states / types not yet implemented
  const assetSrc = isSelected ? asset?.src?.active : asset?.src?.inactive;

  const favouritesAction = isSelected
    ? actionContext.removeFavourite
    : actionContext.addFavourite;

  const toggleAction = actionContext?.invokeAction ?? favouritesAction;

  async function onPress() {
    // TODO: loading state
    await toggleAction(item);
  }

  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={onPress}
      testID={props?.testID || `${item?.id}`}
      accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
      accessible={!!(props?.testID || props?.accessibilityLabel)}
      style={props?.style}
    >
      <ButtonAsset style={asset?.style} uri={assetSrc} {...asset?.props} />
    </TouchableOpacity>
  );
}

export const Button = R.compose(connectToStore(R.pick(["plugins"])))(
  ButtonComponent
);