import React, { useMemo } from "react";
import { TouchableOpacity } from "react-native";
import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
// @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;

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