import { Button, Icon, Responsive } from 'semantic-ui-react'
import Utils from '../Utils/Utils.coffee'

import './Header.less'

export default observer class Header extends Component
  @propTypes:
    onClickLogout: PropTypes.func

  @defaultProps:
    onClickLogout: =>

  onClickMenu: =>
    store.isMobileMenuOpen = true

  componentDidMount: =>
    $(window).resize =>
      @forceUpdate()

  onClickLogout: =>
    @props.onClickLogout()

  render: =>
    <div className="header" style={{ flexDirection: Utils.isMobile() && 'row-reverse' }}>
      <Responsive maxWidth={Responsive.onlyMobile.maxWidth} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: Utils.isMobile() && 'flex-end' }}>
        <Icon name='content' size="big" onClick={@onClickMenu} style={{ cursor: 'pointer', color: '#ffffff' }} />
      </Responsive>
      <div style={{ flex: 3, display: 'flex', justifyContent: (if Utils.isMobile() then 'flex-start' else 'flex-end'), alignItems: 'center' }}>
        <Button size="tiny" color="teal" onClick={@onClickLogout}>로그아웃</Button>
      </div>
    </div>