import React, { FunctionComponent } from 'react';
import {
  Image,
  ImageSourcePropType,
  ImageStyle,
  TouchableOpacity,
  ViewStyle,
} from 'react-native';
import { IButtonProps, IImageButtonStyleProps, IStyledProps } from './types';

export interface IImageButtonProps
  extends IButtonProps,
    IStyledProps<IImageButtonStyleProps> {
  imageSource: ImageSourcePropType;
}

export interface IImageButton extends FunctionComponent<IImageButtonProps> {}

export const ImageButton: IImageButton = ({
  style,
  imageSource,
  onPress,
  onLongPress,
}) => {
  const mergedStyle = { ...buttonStyle, ...style };

  return (
    <TouchableOpacity
      activeOpacity={0.085}
      onPress={onPress}
      onLongPress={onLongPress}
      style={mergedStyle.container}
    >
      <Image source={imageSource} style={mergedStyle.image} />
    </TouchableOpacity>
  );
};

const buttonStyle = {
  container: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
  } as ViewStyle,
  image: {
    width: 40,
    height: 40,
  },
};