import React, { Component } from 'react'; import GuestMenu from './components/GuestMenu'; import CustomMenu from './components/CustomMenu'; import { Link } from 'react-router-dom' import { Menu, Dropdown } from 'semantic-ui-react'

class Toolbar extends Component {

constructor (props) {
      super(props)
      this.handleItemClick = (e, { name }) => this.setState({ activeItem: name })
      this.handleMastMenuClick = (e, { name }) => this.setState({ activeItem: name, activeTitle : e.target.text })
      this.state = {activeItem: "", activeTitle: "テーブル管理"}
}

render() {
        const { activeItem, activeTitle } = this.state
        if(this.props.user === undefined || this.props.user === null){
            return (<Menu inverted pointing secondary>
                    <GuestMenu activeItem={activeItem} onClick={this.handleItemClick}/>
                    <Menu.Menu position='right'>
                      <Menu.Item as={Link} to='/login'>ログイン</Menu.Item>
                      <Menu.Item as={Link} to='/regist'>サインアップ</Menu.Item>
                    </Menu.Menu>
                </Menu>)
        }
        const admin = this.props.user.role === "ADMIN"
        return(
        <Menu inverted pointing secondary>
          <GuestMenu activeItem={activeItem} onClick={this.handleItemClick}/>
          <CustomMenu activeItem={activeItem} onClick={this.handleItemClick} user={this.props.user} />
          <Dropdown item text={activeTitle} style={ {display: admin ? 'block' : 'none'} } >
        <Dropdown.Menu>
              {{# sheet_arr}}
                  <Menu.Item name='{{resource_path}}' active={activeItem === '{{resource_path}}'} as={Link} to='/{{resource_path}}' onClick={this.handleMastMenuClick} >{{model_title}}</Menu.Item>
              {{/ sheet_arr}}
                </Dropdown.Menu>
      </Dropdown>
              <Menu.Menu position='right'>
                  <Menu.Item as={Link} to='/logout'> ログアウト </Menu.Item>
              </Menu.Menu>
        </Menu>
       )
}

}

export default Toolbar;