import React from 'react';
import {StyleSheet, ScrollView} from 'react-native';
import Row from '../components/Row';

class Actions extends React.Component {

  constructor(props) {
    super(props);

    this._fab = false;
    this._rightButton = null;
    this._contextualMenu = false;
    this._toggleTabs = 'shown';
    this._toggleNavBar = 'shown';
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  }

  onNavigatorEvent(event) {
    if (event.id === 'contextualMenuDismissed') {
      this._contextualMenu = false;
    }
  }

  setTitle = () => {
    this.props.navigator.setTitle({
      title: 'New Title!',
    });
  };

  toggleTabs = () => {
    const to = this._toggleTabs === 'shown' ? 'hidden' : 'shown';

    this.props.navigator.toggleTabs({
      to,
      animated: true,
    });
    this._toggleTabs = to;
  };

  setTabBadge = () => {
    this.props.navigator.setTabBadge({
      tabIndex: 1,
      badge: Math.floor(Math.random() * 20) + 1,
    });
  };

  switchToTab = () => {
    this.props.navigator.switchToTab({
      tabIndex: 0,
    });
  };

  toggleNavBar = () => {
    const to = this._toggleNavBar === 'shown' ? 'hidden' : 'shown';

    this.props.navigator.toggleNavBar({
      to,
      animated: true,
    });
    this._toggleNavBar = to;
  };

  showSnackbar = () => {
    this.props.navigator.showSnackbar({
      title: 'Woo Snacks!',
    });
  };

  toggleContextualMenu = () => {
    if (!this._contextualMenu) {
      this.props.navigator.showContextualMenu({
        rightButtons: [{
          title: 'Edit',
          icon: require('../../img/edit.png'),
        }, {
          title: 'Delete',
          icon: require('../../img/delete.png'),
        }],
        onButtonPressed: (index) => console.log(`Button ${index} tapped`)
      });
      this._contextualMenu = true;
    } else {
      this.props.navigator.dismissContextualMenu();
      this._contextualMenu = false;
    }

  };

  setButtons = () => {
    let title = '';

    if (!this._rightButton) {
      title = 'Hello';
    } else if (this._rightButton === 'Hello') {
      title = 'Its Me';
    }

    this.props.navigator.setButtons({
      rightButtons: [{
        title,
        id: 'topRight',
      }],
      animated: true,
    });
    this._rightButton = title;
  };

  toggleFAB = () => {
    if (this._fab) {
      this.props.navigator.setButtons({
        fab: {},
      });
      this._fab = false;
    } else {
      this.props.navigator.setButtons({
        fab: {
          collapsedId: 'share',
          collapsedIcon: require('../../img/edit@1x.png'),
          expendedId: 'clear',
          expendedIcon: require('../../img/edit@1x.png'),
          backgroundColor: '#ff505c',
          actions: [
            {
              id: 'mail',
              icon: require('../../img/edit@1x.png'),
              backgroundColor: '#03A9F4'
            },
            {
              id: 'delete',
              icon: require('../../img/delete@1x.png'),
              backgroundColor: '#4CAF50'
            }
          ]
        },
        animated: true,
      });
      this._fab = true;
    }
  };

  render() {
    return (
      <ScrollView style={styles.container}>
        <Row title={'Set Title'} onPress={this.setTitle}/>
        <Row title={'Toggle Tabs'} onPress={this.toggleTabs}/>
        <Row title={'Set Tab Badge'} onPress={this.setTabBadge}/>
        <Row title={'Switch To Tab 0'} onPress={this.switchToTab}/>
        <Row title={'Toggle Nav Bar'} onPress={this.toggleNavBar}/>
        <Row title={'Show Snackbar'} onPress={this.showSnackbar} platform={'android'}/>
        <Row title={'Toggle Contextual Menu'} onPress={this.toggleContextualMenu} platform={'android'}/>
        <Row title={'Set Right Buttons'} onPress={this.setButtons}/>
        <Row title={'Toggle FAB'} onPress={this.toggleFAB} platform={'android'}/>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {},
});

export default Actions;