//action file
import {
    OPEN_CHORDS_MODAL,
    CLOSE_CHORDS_MODAL
} from './types';

//exporting the action, if open payload will be true : false
export const openChordsModal = () => {
    console.log('Chords Modal Button Clicked')
    return {
        type: OPEN_CHORDS_MODAL,
        payload: true
    };
};

//exporting the action, if open payload will be true : false
export const closeChordsModal = () => ({
    type: CLOSE_CHORDS_MODAL,
    payload: false
});




//type file in action
export const OPEN_CHORDS_MODAL = 'open_chords_modal';
export const CLOSE_CHORDS_MODAL = 'close_chords_modal';

//index file in actions folder
export * from './modal_actions';


//component file
import React, { Component } from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-elements';
import { connect } from 'react-redux';
import { openChordsModal } from '../actions';

//we are importing connect because we are using an action to handle openChordModals

class ViewChordsButton extends Component {
    render() {
        return (
            <View style={this.props.style}>
                <Button
                    raised
                    icon={{ name: 'library-music'}}
                    title="View Transposed Chords"
                    backgroundColor="#2196F3"
                    onPress={() => this.props.openChordsModal}
                />
            </View>
        );
    }
}

//were not gonna pass any state to props so no mapToStateProps, but we have to pass openChordsModal
export default connect(null, { openChordsModal })(ViewChordsButton);