interface IPictureWrapperProps {
  small: string;
  original: string;
}
class PictureWrapper extends React.PureComponent<IPictureWrapperProps> {
  public render() {
    const { small } = this.props;
    return <Picture isSmall imageUri={small} onPress={this.onPress} />;
  }
  private onPress = () => {
   // DO YOUR SHIT
  };
}

interface IProps extends IThemeProps {
  isSmall?: boolean;
  imageUri: string;
  status?: string;
  buttonType?: EBUTTON_ACTION_ICONS;
  isTransparent?: boolean;
}

interface IState {
  height: number;
}

const BUTTON_CONTAINER_SIZE = 32;

export class PictureWithTheme extends Component<IProps, IState> {
  public static defaultProps = {
    isSmall: false,
    isTransparent: false,
  };
  public state: IState = { height: 0 };

  public render() {
    const {
      buttonType,
      imageUri,
      isSmall,
      isTransparent,
      status,
      theme,
    } = this.props;
    return (
      <Container isSmall={!!isSmall}>
        <StyledImage
          uri={imageUri}
          resizeMode="cover"
          height={this.state.height}
          isTransparent={!!isTransparent}
          onLayout={this.onLayout}
        />
      </Container>
    );
  }

  private onLayout = (event: LayoutChangeEvent) => {
    const { width } = event.nativeEvent.layout;
    this.setState({ height: width });
  };
}

const Container = styled.View<{
  isSmall: boolean;
}>`
  justify-content: center;
  width: ${({ isSmall }) => (isSmall ? 47 : 100)}%;
  margin-bottom: ${({ theme, isSmall }) =>
    isSmall ? theme.spacing.medium : 0};
`;

const StyledImage = styled(Picture)<{
  height: number;
  isTransparent: boolean;
}>`
  height: ${({ height }) => height}px;
  border-radius: 8px;
  opacity: ${({ isTransparent }) => (isTransparent ? 0.5 : 1)};
`;

const Picture = withTheme(PictureWithTheme);