import React, { useMemo } from "react";
import { TouchableOpacity } from "react-native";
import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
// @ts-ignore
import { defaultCloseAsset } from "./assets";

export type CloseButtonProps = {
  enabled: boolean;
  close: () => void;
  asset: string | undefined;
  assetFocused: string | undefined;
  height: number;
  width: number;
  marginTop: number;
  marginBottom: number;
  marginLeft: number;
  marginRight: number;
};

export function CloseButton(props: CloseButtonProps) {
  const {
    enabled,
    width,
    height,
    marginBottom,
    marginTop,
    marginLeft,
    marginRight,
    asset,
    assetFocused,
    close,
  } = props;

  const [focused, setFocus] = React.useState(null);

  const uri = useMemo(
    () => (focused ? assetFocused : asset) || defaultCloseAsset,
    [asset, assetFocused, focused]
  );

  if (!enabled) return null;

  // Expose the close button as its own accessible control so screen readers
  // (e.g. iOS VoiceOver) can focus and activate it. The image-only button
  // otherwise has no label/role, leaving it unreachable/unannounced. Uses the
  // framework's localized "close" button config (label + hint + button role).
  // Computed each render (not memoized) so runtime localization updates via
  // AccessibilityManager.updateLocalizations() are picked up on re-render.
  const accessibilityProps =
    AccessibilityManager.getInstance().getButtonAccessibilityProps("close");

  return (
    <TouchableOpacity
      activeOpacity={1}
      testID="closeButton"
      {...accessibilityProps}
      style={{
        marginBottom,
        marginTop,
        marginLeft,
        marginRight,
      }}
      onPress={close}
      onPressIn={() => setFocus(true)}
      onPressOut={() => setFocus(false)}
    >
      <QBImage fadeDuration={0} source={{ uri }} style={{ width, height }} />
    </TouchableOpacity>
  );
}