import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';

const ActionBar = ({ status, isSelf }) => {
  if (isSelf) { return null; }
  if (status === 'connected') { return <ConnectedBar />; }
  if (status === 'pending') { return <NotConnectedBar isPending />; }

  return <NotConnectedBar />;
};

const NotConnectedBar = ({ isPending }) => (
  <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 20, backgroundColor: '#F5F8FA' }}>
    <TouchableOpacity style={styles.actionBtn}>
      <Icon type='material-community' name='share' color='#53ACF0' />
      <Text style={styles.actionBtnTitle}>Share</Text>
    </TouchableOpacity>
    {isPending ? <PendingBtn /> : <ConnectBtn />}
    <TouchableOpacity style={styles.actionBtn}>
      <Icon type='material-community' name='qrcode' color='#53ACF0' />
      <Text style={styles.actionBtnTitle}>QR Code</Text>
    </TouchableOpacity>
  </View>
);

const ConnectedBar = () => (
  <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 20, borderWidth: 0.5, borderColor: '#E0E3EF' }}>
    <TouchableOpacity style={styles.connectedBtns}>
      <Icon type='material' name='call' color='#008A1C' size={32} />
    </TouchableOpacity>
    <TouchableOpacity style={styles.connectedBtns}>
      <Icon type='material-community' name='share' color='#53ACF0' size={32} />
    </TouchableOpacity>
    <TouchableOpacity style={styles.connectedBtns}>
      <Icon type='material-community' name='message-text' color='#0462AA' size={32} />
    </TouchableOpacity>
    <TouchableOpacity style={styles.connectedBtns}>
      <Icon type='material-community' name='file-document' color='#F3DD0F' size={32} />
    </TouchableOpacity>
  </View>
);

const PendingBtn = () => (
  <TouchableOpacity style={styles.actionBtn}>
    <Icon type='material' name='person-add' color='#008A1C' />
    <Text style={styles.pedningBtnTitle}>Pending</Text>
  </TouchableOpacity>
);

const ConnectBtn = () => (
  <TouchableOpacity style={styles.actionBtn}>
    <Icon type='material' name='person-add' color='#53ACF0' />
    <Text style={styles.actionBtnTitle}>Connect</Text>
  </TouchableOpacity>
);

const styles = {
  actionBtn: {
    flex: 1,
    paddingVertical: 6,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 0.5,
    borderColor: '#E0E3EF',
    flexDirection: 'row'
  },
  actionBtnTitle: {
    marginLeft: 7,
    color: '#53ACF0',
    fontSize: 14
  },
  pedningBtnTitle: {
    marginLeft: 7,
    color: '#008A1C',
    fontSize: 14
  },
  connectedBtns: {
    marginHorizontal: 15,
    marginVertical: 5
  }
};

export default ActionBar;
