// @require '../../style/reset.scss'
// @require './demo.scss'

import React from 'react';
import ReactDom from 'react-dom';
import Menu, { MenuItem, MenuWrapper } from '../index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  onClick = (e, itemKey) => {
    console.log(`click menu item: ${itemKey}`);
  }

  onClickSubMenu = (e, itemKey) => {
    console.log(`click menu title: ${itemKey}`);
  }

  render() {
    return (
      <Demo name="Menu" doc={<Doc />}>
        <DemoPanel title="默认demo">
          <MenuWrapper
            onClick={this.onClick}
            onClickSubMenu={this.onClickSubMenu}
          >
            <Menu mode="horizontal">
              <MenuItem name="mail">
                Navigation One
              </MenuItem>
              <MenuItem name="app" disabled>
                Navigation Two
              </MenuItem>
              <MenuItem name="submenu" spread={
                <Menu>
                  <MenuItem name="setting:1">Option 1</MenuItem>
                  <MenuItem name="setting:2">Option 2</MenuItem>
                  <MenuItem name="setting:3">Option 3</MenuItem>
                  <MenuItem name="setting:4">Option 4</MenuItem>
                </Menu>
              }>
                <span>Navigation Three - Submenu</span>
              </MenuItem>
              <MenuItem name="alipay">
                <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
              </MenuItem>
            </Menu>
          </MenuWrapper>
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');

// 会被首页调用，判断下有无节点
if (demo) {
  ReactDom.render(<App />, demo);
}