import React from 'react';

import {
  MenuComponent
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

import {
  ITestingProps
} from '../../types';

export default function Testing({
  component
}: ITestingProps<MenuComponent>): JSX.Element {
  const Menu = component;
  
  return <>
    <H3>Some Case</H3>
    <Menu {...{
      selectMode: 'multiple',
      defaultOpenKeys: 'sub-menu'
    }}>
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item disabled key="2">
        Disabled option 2
      </Menu.Item>
      <Menu.Divider key="divider" />
      <Menu.Group label="Group">
        <Menu.Item key="group-1">Group option 1</Menu.Item>
        <Menu.Item key="group-2">Group option 2</Menu.Item>
      </Menu.Group>
      <Menu.Divider />
      <Menu.SubMenu key="sub-menu" label="Sub menu">
        <Menu.Item key="sub-1">Sub option 1</Menu.Item>
        <Menu.Item key="sub-2">Sub option 2</Menu.Item>
        <Menu.Item disabled key="sub-3">
          <a href="https://www.taobao.com/" target="__blank">
            Disabled Option Link 3
          </a>
        </Menu.Item>
        <Menu.Item key="sub-4">
          <a href="https://www.taobao.com/" target="__blank">
            Option Link 4
          </a>
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.Item key="3" helper="CTRL+P">
        Option 3
      </Menu.Item>
      <Menu.Item disabled key="4">
        <a href="https://www.taobao.com/" target="__blank">
          Disabled Option Link
        </a>
      </Menu.Item>
      <Menu.Item key="5">
        <a href="https://www.taobao.com/" target="__blank">
          Option Link
        </a>
      </Menu.Item>
    </Menu>
  </>;
}