import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import { Nav } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import '../../components/index.css';

const dataSource = [
  { key: 'nav1', label: 'Nav 1', icon: 'account' },
  { key: 'nav2', label: 'Nav 2', icon: 'account' },
  { key: 'nav3', label: 'Nav 3', icon: 'account' },
  { key: 'nav4', label: 'Nav 4', icon: 'account' },
  {
    label: 'Nav 5',
    icon: 'account',
    children: [
      {
        key: 'nav51',
        label: 'Nav 5-1',
        icon: 'account',
      },
      {
        key: 'nav52',
        label: 'Nav 5-2',
        icon: 'account',
        children: [
          {
            key: 'nav521',
            label: 'Nav 5-2-1',
            icon: 'account',
          },
          {
            key: 'nav522',
            label: 'Nav 5-2-2',
            icon: 'account',
          },
          {
            key: 'nav523',
            label: 'Nav 5-2-3',
            icon: 'account',
          },
        ],
      },
    ],
  },
];

// on select
const onSelect = (itemKey, e) => {
  console.log(itemKey);
};

const NavDemo = () => {
  const [showDrawer, setDrawerShow] = useState(false);
  return (
    <View className="app">
      <Text className="demo-title">By DataSource</Text>
      <View className="demo-content">
        <Nav defaultSelectedKeys="nav2" selectedKeys={'nav3'} dataSource={dataSource} onSelect={onSelect} />
      </View>
    </View>
  );
};
// render(<NavDemo />, null, { driver: DriverUniversal });
 export default NavDemo