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';

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

const NavDemo = () => {
  const [showDrawer, setDrawerShow] = useState(false);
  return (
    <View className="app">
      <Text className="demo-title">normal</Text>

      <View className="demo-content">
        <Text className="demo-sub-title">Solid</Text>
        <Nav size="medium" onSelect={onSelect}>
          <Nav.Item icon="account">Nav1</Nav.Item>
          <Nav.Item icon="account">Nav2</Nav.Item>
          <Nav.SubNav icon="account" label="Nav 3">
            <Nav.Item icon="account">Nav3-1</Nav.Item>
          </Nav.SubNav>
        </Nav>

        <Text className="demo-sub-title">Text</Text>
        <Nav size="medium" model="text" onSelect={onSelect}>
          <Nav.Item icon="account">Nav1</Nav.Item>
          <Nav.Item icon="account">Nav2</Nav.Item>
          <Nav.SubNav icon="account" label="Nav 3">
            <Nav.Item icon="account">Nav3-1</Nav.Item>
          </Nav.SubNav>
        </Nav>
      </View>

      <Text className="demo-title">Primary</Text>
      <View className="demo-content">
        <Text className="demo-sub-title">Solid</Text>
        <Nav size="medium" type="primary" onSelect={onSelect}>
          <Nav.Item icon="account">Nav1</Nav.Item>
          <Nav.Item icon="account">Nav2</Nav.Item>
          <Nav.SubNav icon="account" label="Nav 3">
            <Nav.Item icon="account">Nav3-1</Nav.Item>
          </Nav.SubNav>
        </Nav>

        <Text className="demo-sub-title">Text</Text>
        <Nav size="medium" type="primary" model="text" onSelect={onSelect}>
          <Nav.Item icon="account">Nav1</Nav.Item>
          <Nav.Item icon="account">Nav2</Nav.Item>
          <Nav.SubNav icon="account" label="Nav 3">
            <Nav.Item icon="account">Nav3-1</Nav.Item>
          </Nav.SubNav>
        </Nav>
      </View>

      <Text className="demo-title">invserse</Text>
      <View className="demo-content--inverse">
        <Text className="demo-sub-title demo-sub-title--inverse">Solid</Text>
        <Nav size="medium" type="inverse" onSelect={onSelect}>
          <Nav.Item icon="account">Nav1</Nav.Item>
          <Nav.Item icon="account">Nav2</Nav.Item>
          <Nav.SubNav icon="account" label="Nav 3">
            <Nav.Item icon="account">Nav3-1</Nav.Item>
          </Nav.SubNav>
        </Nav>

        <Text className="demo-sub-title demo-sub-title--inverse">text</Text>
        <Nav size="medium" type="inverse" model="text" onSelect={onSelect}>
          <Nav.Item icon="account">Nav1</Nav.Item>
          <Nav.Item icon="account">Nav2</Nav.Item>
          <Nav.SubNav icon="account" label="Nav 3">
            <Nav.Item icon="account">Nav3-1</Nav.Item>
          </Nav.SubNav>
        </Nav>
      </View>
    </View>
  );
};
// render(<NavDemo />, null, { driver: DriverUniversal });
 export default NavDemo