import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import { Menu } from '@alifd/meet';

import './index.css';

const MenuDemo = () => {
  const [openKeys, setOpenKeys] = useState(['0']);
  const [selectedSingleKeys, setSelectedSingleKeys] = useState(['0-0']);
  const [selectedKeys, setSelectedKeys] = useState(['0-0', '0-3']);

  return (
    <View>
      <Text className="demo-title">Basic Select</Text>
      <View className="demo-content">
        <Menu
          onItemClick={(key, item, e) => {
            console.log('onItemClick: ', key, item, e);
          }}
        >
          <Menu.Item key="option1">Option</Menu.Item>
          <Menu.Item key="option2">Option2</Menu.Item>
          <Menu.Item key="option3">Option3</Menu.Item>
          <Menu.Item key="option4">Option4</Menu.Item>
        </Menu>
      </View>
      <Text className="demo-title">Single Select</Text>
      <View className="demo-content">
        <Menu
          inlineIndent={16}
          defaultOpenKeys={openKeys}
          selectMode="single"
          selectedKeys={selectedSingleKeys}
          onSelect={(selectedKeys, item, extra) => {
            console.log('onSelect: ', selectedKeys, item, extra);
            setSelectedSingleKeys(selectedKeys);
          }}
        >
          <Menu.SubMenu label={<View>Option</View>}>
            <Menu.Item>Option1-1</Menu.Item>
            <Menu.Item>Option1-2</Menu.Item>
            <Menu.Item>Option1-3</Menu.Item>
            <Menu.Item>Option1-4</Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu label={<View>Option2</View>} loading>
            <Menu.Item>Option2-1</Menu.Item>
            <Menu.Item loading>Option2-2</Menu.Item>
            <Menu.Item disabled>Option2-3</Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu label={<View>Option3</View>}>
            <Menu.Item>Option3-1</Menu.Item>
            <Menu.Item>Option3-2</Menu.Item>
            <Menu.Item>Option3-3</Menu.Item>
            <Menu.SubMenu label={<View>Option3-4</View>}>
              <Menu.Item>Option3-4-1</Menu.Item>
              <Menu.Item>Option3-4-2</Menu.Item>
              <Menu.Item>Option3-4-3</Menu.Item>
            </Menu.SubMenu>
          </Menu.SubMenu>
        </Menu>
      </View>
      <Text className="demo-title">Multiple Select</Text>
      <View className="demo-content">
        <Menu
          inlineIndent={16}
          defaultOpenKeys={openKeys}
          selectMode="multiple"
          selectedKeys={selectedKeys}
          onSelect={(selectedKeys, item, extra) => {
            console.log('onSelect: ', selectedKeys, item, extra);
            setSelectedKeys(selectedKeys);
          }}
        >
          <Menu.SubMenu label={<View>Option</View>}>
            <Menu.Item>Option1-1</Menu.Item>
            <Menu.Item>Option1-2</Menu.Item>
            <Menu.Item>Option1-3</Menu.Item>
            <Menu.Item disabled>Option1-4</Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu label={<View>Option2</View>} loading>
            <Menu.Item>Option2-1</Menu.Item>
            <Menu.Item loading>Option2-2</Menu.Item>
            <Menu.Item disabled>Option2-3</Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu label={<View>Option3</View>}>
            <Menu.Item>Option3-1</Menu.Item>
            <Menu.Item>Option3-2</Menu.Item>
            <Menu.Item>Option3-3</Menu.Item>
            <Menu.SubMenu label={<View>Option3-4</View>}>
              <Menu.Item>Option3-4-1</Menu.Item>
              <Menu.Item>Option3-4-2</Menu.Item>
              <Menu.Item>Option3-4-3</Menu.Item>
            </Menu.SubMenu>
          </Menu.SubMenu>
        </Menu>
      </View>
    </View>
  );
};

// render(<MenuDemo />, null, { driver: DriverUniversal });
 export default MenuDemo