import React from 'react'

import { Dropdown, Menu, MenuItem } from 'react-icecream'
import { RightThinIcon } from 'react-icecream/icons'

export default function Demo() {

  const subOverlay = (
    <Menu>
      <MenuItem onClick={() => console.log('Rename clicked.')}>Rename</MenuItem>
      <MenuItem onClick={() => console.log('Transfer clicked.')}>Transfer</MenuItem>
    </Menu>
  )

  const overlay = (
    <Menu>
      <MenuItem onClick={() => console.log('Detail clicked.')}>Detail</MenuItem>
      <MenuItem onClick={() => console.log('Update clicked.')}>Update</MenuItem>
      <MenuItem onClick={() => console.log('Remove clicked.')}>Remove</MenuItem>
      <Dropdown
        overlay={subOverlay}
        placement="leftTop"
        align={{ offset: [-1, -4] }} // 精细控制一下 SubMenu 与对应 MenuItem 的相对位置
      >
        <div>
          {/* 目前 `Dropdown` children 不支持自定义组件（无法触发事件），所以这里拿一个 `div` 包一下 */}
          <MenuItem style={{ justifyContent: 'space-between' }}>
            More
            <RightThinIcon />
          </MenuItem>
        </div>
      </Dropdown>
    </Menu>
  )

  return (
    <Dropdown overlay={overlay}>
      <span>Operations</span>
    </Dropdown>
  )
}