/* @flow */
import React, { PureComponent } from 'react';
import { Text, StyleSheet, View } from 'react-native';

import type { Style } from '../types';
import NavButton from '../nav/NavButton';

const styles = StyleSheet.create({
  wrapper: {
    height: 44,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 16,
    paddingRight: 8,
    flex: 1,
  },
  text: {
    color: 'white',
    fontSize: 14,
    alignSelf: 'center',
  },
  icon: {
    fontSize: 28,
  },
});

type Props = {
  style?: Style,
  displayMessage: string,
  onOptionsPress: () => void,
};

export default class LightboxFooter extends PureComponent<Props> {
  props: Props;

  render() {
    const { displayMessage, onOptionsPress, style } = this.props;
    return (
      <View style={[styles.wrapper, style]}>
        <Text style={styles.text}>{displayMessage}</Text>
        <NavButton
          name="more-vertical"
          color="white"
          style={styles.icon}
          onPress={onOptionsPress}
        />
      </View>
    );
  }
}

/* @flow */
import React, { PureComponent } from 'react';
import { Text, StyleSheet, View } from 'react-native';

import type { Style } from '../types';
import Icon from '../common/Icons';

const styles = StyleSheet.create({
  wrapper: {
    height: 44,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 16,
    paddingRight: 8,
    flex: 1,
  },
  text: {
    color: 'white',
    fontSize: 14,
    alignSelf: 'center',
  },
  icon: {
    fontSize: 28,
    alignSelf: 'center',
  },
});

type Props = {
  style?: Style,
  displayMessage: string,
  onOptionsPress: () => void,
};

export default class LightboxFooter extends PureComponent<Props> {
  props: Props;

  render() {
    const { displayMessage, onOptionsPress, style } = this.props;
    return (
      <View style={[styles.wrapper, style]}>
        <Text style={styles.text}>{displayMessage}</Text>
        <Icon style={styles.icon} color="white" name="more-vertical" onPress={onOptionsPress} />
      </View>
    );
  }
}

Align option icon in Lightbox screen
layout: Align option icon in Lightbox screen

Icon was not properly aligned due to overlay of unreadCount.

As there is no need of unreadCount here, Instead of using NavButton,
use Icon component directly.

Fixes #3003.
