
import React from 'react';
import { connect } from 'react-redux';
import { Button, Icon } from 'semantic-ui-react'
import classNames from 'classnames'

import './styles.scss'

import { withRouter } from 'react-router'

class GraphTypeSwitcher extends React.Component {
    /*
    * On click, move graph in "selectNode" mode
    */
    constructor(props) {
        super(props)
    }

    render() {
        const { graphType, id } = this.props

        const editorClass = classNames("graphTypeSwitcher-button", {
            "active": graphType === "editor"
        })
        const abstractionClass = classNames("graphTypeSwitcher-button", {
            "active": graphType === "collection"
        })
        const exploreClass = classNames("graphTypeSwitcher-button", {
            "active": graphType === "node"
        })

        return (
            <div className="graphTypeSwitcher">
                <Button.Group className="graphTypeSwitcher-buttons">
                    <Button 
                        icon='edit'
                        content='Editor'
                        onClick={ () => this.props.history.push(`/app/nodes/${id}/edit`) }
                        className={ editorClass }
                    />
                    <Button 
                        icon='triangle down'
                        content='Abstraction graph'
                        onClick={ () => this.props.history.push(`/app/collections/${id}/nodes`) }
                        className={ abstractionClass }
                    />
                    <Button 
                        icon='crosshairs'
                        content='Explore graph'
                        onClick={ () => this.props.history.push(`/app/nodes/${id}`) }
                        className={ exploreClass }
                    />
                </Button.Group>
            </div>
        )
    }
}

// export default connect((state) => ({ mode: state.graphUiState.mode }), {
//     setGraphMode
// })(GraphTypeSwitcher)

export default withRouter(GraphTypeSwitcher)

@@ -1059,14 +1059,13 @@
 nt='
-Editor
+Notes
 '%0A  
@@ -1337,25 +1337,11 @@
 nt='
-Abstraction gr
+M
 ap
-h
 '%0A  
@@ -1506,32 +1506,108 @@
              /%3E%0A
+                    %7B%0A                        /*%0A                         *%0A
                 
@@ -1698,21 +1698,13 @@
 nt='
-Explore graph
+Links
 '%0A  
@@ -1830,32 +1830,32 @@
  exploreClass %7D%0A
-
                 
@@ -1853,32 +1853,81 @@
              /%3E%0A
+                        */%0A                    %7D%0A
                 

change modes to notes and map