import React from "react";
import { useEntryActionState } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
import {
  isActionAvailableFor,
  RegisteredAction,
} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";

import { Button } from "../Button";

export type ActionButtonProps = {
  entry: ZappEntry;
  item: RegisteredAction;
  configuration: any;
  width: number;
  component?: ZappUIComponent & { parent?: ZappUIComponent };
};

type Props = ActionButtonProps & {
  onPress?: (item: any) => void;
};

/**
 * Unified action button for the modal bottom sheet.
 *
 * Every item is a `RegisteredAction` resolved from the registry (entry actions,
 * registry actions and legacy context-provider actions alike), so the button
 * simply reads `item.action` and drives it through `useEntryActionState`
 * (backed by the action's observable / `addListener`).
 */
export function ActionButton(props: Props) {
  const { item, entry, onPress: onItemPress, component } = props;

  const action = item?.action;

  const { state, invokeAction } = useEntryActionState(action, entry);

  const onPress = React.useCallback(
    (_item) => {
      invokeAction({
        context: "toast",
        dismiss: () => onItemPress?.(item),
        ...(component ? { component } : {}),
      });
    },
    [invokeAction, item, onItemPress, component]
  );

  if (!isActionAvailableFor(action, entry as ZappEntry)) return null;

  return (
    <Button {...props} item={state} onPress={onPress} label={state?.label} />
  );
}

// Explicitly set display name for the component
ActionButton.displayName = "ActionButton";