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 NavDemo = () => {
  const [showDrawer, setDrawerShow] = useState(false);
  const [selectedKeys, setSelectedKeys] = useState('');

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

  return (
    <View className="app">
      <Text className="demo-title">controlled</Text>
      <Nav onSelect={onSelect} selectedKeys={'6-4-2'}>
        <Nav.Item icon="account" label="Nav 1" />
        <Nav.Item icon="account" label="Nav 2" />
        <Nav.Item icon="account" label="Nav 3" />
        <Nav.Item icon="account" label="Nav 4" />
        <Nav.SubNav icon="account" label="Nav 5" expanded>
          <Nav.Item icon="account" label="Nav 51" />
          <Nav.Item icon="account" label="Nav 52" />
          <Nav.Item icon="account" label="Nav 53" />
          <Nav.SubNav icon="account" label="Nav 54" expanded>
            <Nav.Item icon="account" label="Nav 541" />
            <Nav.Item key={'6-4-2'} icon="account" label="Nav 542" />
            <Nav.Item icon="account" label="Nav 543" />
          </Nav.SubNav>
        </Nav.SubNav>
      </Nav>

      <Text className="demo-title">uncontrolled</Text>
      <Nav>
        <Nav.Item icon="account" label="Nav 1" />
        <Nav.Item icon="account" label="Nav 2" />
        <Nav.Item icon="account" label="Nav 3" />
        <Nav.Item icon="account" label="Nav 5" />
        <Nav.SubNav icon="account" label="Nav 5">
          <Nav.Item icon="account" label="Nav 51" />
          <Nav.Item icon="account" label="Nav 52" />
          <Nav.Item icon="account" label="Nav 53" />
          <Nav.SubNav icon="account" label="Nav 54">
            <Nav.Item icon="account" label="Nav 541" />
            <Nav.Item icon="account" label="Nav 542" />
            <Nav.Item icon="account" label="Nav 543" />
          </Nav.SubNav>
        </Nav.SubNav>
      </Nav>
    </View>
  );
};
// render(<NavDemo />, null, { driver: DriverUniversal });
 export default NavDemo 