List

/* @flow */
import React, { PureComponent } from 'react';
import { TouchableHighlight, Image, Dimensions } from 'react-native';

const { width }: { width: number } = Dimensions.get('window');

type node = { node: { image: { uri: string } } };
type State = {};
type Props = {
  item: node,
  selectImageItem: Object | node,
  selectImage(item: Object): void,
};

export default class ProfilePictureItem extends PureComponent<void, Props, State> {
  props: Props;
  state: State;

  selectImage(item: Object) {
    this.props.selectImage(item);
  }

  render() {
    const { item } = this.props;
    return (
      <TouchableHighlight onPress={() => this.selectImage(item)}>
        <Image
          source={{ uri: item.node.image.uri }}
          style={{
            width: width / 4 - 5,
            height: width / 4 - 5,

            margin: 2,
            borderWidth:
              this.props.selectImageItem.node.image.uri === item.node.image.uri
                ? (width / 4 - 5) / 2
                : 0,
            borderColor:
              this.props.selectImageItem.node.image.uri === item.node.image.uri
                ? 'rgba(255,255,255,0.4)'
                : 'transparent',
          }}
        />
      </TouchableHighlight>
    );
  }
}