import Header from '../../components/Header/Header.coffee'
import Menu from '../../components/Menu/Menu.coffee'
import Utils from '../../components/Utils/Utils.jsx'
import MobileMenu from '../../components/Menu/MobileMenu.coffee'
import Responsive from '../../components/Responsive/Responsive.coffee'

export default observer class AdminLayout extends Component
  constructor: (props) ->
    super props

    @state = observable
      isMobile: false

  @propTypes:
    content: PropTypes.element.isRequired
    onClickMobileMenuClose: PropTypes.func

  @defaultProps:
    onClickMobileMenuClose: =>

  onClickMobileMenuClose: =>
    @props.onClickMobileMenuClose()

  componentDidMount: =>
    @state.isMobile = Utils.isMobile()

    $(window).resize =>
      @state.isMobile = Utils.isMobile()

  render: =>
    menuItems = [
      title: '대쉬보드'
      iconName: 'bar graph'
      url: '/dashboard'
    ,
      title: 'ETC'
      iconName: 'setting'
      badge: 7
      subItems: [
        title: '설정'
        badge: 2
        url: '/settings'
      ,
        title: '사용자'
        badge: 5
        url: '/users'
      ]
    ]

    <div className="layout" style={{ display: 'flex', minHeight: '100%' }}>
      <Responsive only="tablet computer" style={{ flexBasis: 225 }}>
        <div style={{ position: 'fixed', width: 225, height: '100%' }}>
          <Menu company="Meteor React Admin" items={menuItems} />
        </div>
      </Responsive>
      <Responsive only="mobile">
        <MobileMenu isOpen={store.isMobileMenuOpen} onClickClose={@onClickMobileMenuClose} company="Meteor React Admin" items={menuItems} />
      </Responsive>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ flexBasis: 80 }}>
          <div style={{ position: 'fixed', height: 80, width: if @state.isMobile then '100%' else 'calc(100% - 225px)' }}>
            <Header />
          </div>
        </div>
        <div style={{ flex: 1, padding: 16 }}>
          { this.props.content }
        </div>
        <div style={{ flexBasis: 65 }}>

        </div>
      </div>
    </div>