import { MenuView } from "@react-native-menu/menu";
import type { ReactElement } from "react";
import { Platform, View, type PressableProps, type StyleProp, type ViewStyle } from "react-native";

import type { useMediaActions } from "../lib/mediaActions";
import { SymbolView } from "./AppSymbol";
import { ControlPillMenu } from "./ControlPill";

export function MediaActionsMenu(props: {
  readonly media: ReturnType<typeof useMediaActions>;
  readonly inModal?: boolean;
  readonly children?: ReactElement<PressableProps>;
  readonly style?: StyleProp<ViewStyle>;
}) {
  if (props.media.actions.length === 0) return props.children ?? null;
  // Android's normal anchored menu lives in the app-root portal, behind native modals.
  const nativeAndroidMenu = props.inModal && Platform.OS === "android";
  const Menu = nativeAndroidMenu ? MenuView : ControlPillMenu;
  return (
    <Menu
      title={props.media.title}
      style={props.style}
      shouldOpenOnLongPress={props.children !== undefined}
      actions={props.media.actions.map(({ id, title, disabled }) => ({
        id,
        title,
        attributes: { disabled: disabled ?? false },
      }))}
      onPressAction={({ nativeEvent }) => {
        props.media.actions.find(({ id }) => id === nativeEvent.event)?.run();
      }}
    >
      {props.children ?? (
        <View
          accessible
          accessibilityRole="button"
          accessibilityLabel="Media actions"
          className="min-h-11 min-w-11 items-center justify-center rounded-md bg-black/60"
        >
          <SymbolView name="ellipsis" size={20} tintColor="#ffffff" type="monochrome" />
        </View>
      )}
    </Menu>
  );
}