/**
 * @flow
 */

import React from 'react'
import { Button, ScrollView } from 'react-native'
import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation'

import Ionicons from 'react-native-vector-icons/Ionicons'
import SampleText from './SampleText'

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <SafeAreaView forceInset={{ horizontal: 'always' }}>
      <SampleText>{banner}</SampleText>
      <Button
        onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
        title='Open profile screen'
      />
      <Button
        onPress={() => navigation.navigate('NotifSettings')}
        title='Open notifications screen'
      />
      <Button
        onPress={() => navigation.navigate('SettingsTab')}
        title='Go to settings tab'
      />
      <Button onPress={() => navigation.goBack(null)} title='Go back' />
    </SafeAreaView>
  </ScrollView>
)

const MyHomeScreen = ({ navigation }) => (
  <MyNavScreen banner='Home Screen' navigation={navigation} />
)

const MyProfileScreen = ({ navigation }) => (
  <MyNavScreen
    banner={`${navigation.state.params.name}s Profile`}
    navigation={navigation}
  />
)

const MyNotificationsSettingsScreen = ({ navigation }) => (
  <MyNavScreen banner='Notifications Screen' navigation={navigation} />
)

const MySettingsScreen = ({ navigation }) => (
  <MyNavScreen banner='Settings Screen' navigation={navigation} />
)

var bitcoin = require('bitcoinjs-lib')
var myString = bitcoin.ECPair.makeRandom().toWIF()

const TabNav = TabNavigator(
  {
    MainTab: {
      screen: MyHomeScreen,
      path: '/',
      navigationOptions: {
        title: 'Welcome1 ' + myString,
        tabBarLabel: 'Transactions',
        tabBarIcon: ({ tintColor, focused }) => (
          <Ionicons
            name={focused ? 'ios-home' : 'ios-home-outline'}
            size={26}
            style={{ color: tintColor }}
          />
        )
      }
    },
    SettingsTab: {
      screen: MySettingsScreen,
      path: '/settings',
      navigationOptions: {
        title: 'Settings',
        tabBarIcon: ({ tintColor, focused }) => (
          <Ionicons
            name={focused ? 'ios-settings' : 'ios-settings-outline'}
            size={26}
            style={{ color: tintColor }}
          />
        )
      }
    }
  },
  {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
)

const SecondaryBottomTabs = StackNavigator({
  Root: {
    screen: TabNav
  },
  NotifSettings: {
    screen: MyNotificationsSettingsScreen,
    navigationOptions: {
      title: 'Notifications'
    }
  },
  Profile: {
    screen: MyProfileScreen,
    path: '/people/:name',
    navigationOptions: ({ navigation }) => {
      title: `${navigation.state.params.name}'s Profile!`
    }
  }
})

export default SecondaryBottomTabs