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

import '../../components/index.css';

const BreadCrumbDemo = () => {
  return (
    <View>
      <Text className="demo-title">BreadCrumb</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="small">
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
      </View>
      <Text className="demo-title">Size</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="small">
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="medium">
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="large">
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
      </View>
      <Text className="demo-title">Disabled</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="small" disabled>
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="small">
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item disabled>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
      </View>
      <Text className="demo-title">MaxNode</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="small" maxNode={3}>
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>四级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>五级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
      </View>
      <Text className="demo-title">Separator</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb size="small" maxNode={3} separator={'/'}>
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>四级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>五级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
      </View>
      <Text className="demo-title">onClick</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <BreadCrumb
              size="small"
              onClick={(index) => {
                Message.success(`点击了第 ${index + 1} 项`);
              }}
            >
              <BreadCrumb.Item>一级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>二级菜单</BreadCrumb.Item>
              <BreadCrumb.Item>三级菜单</BreadCrumb.Item>
            </BreadCrumb>
          </View>
        </View>
      </View>
    </View>
  );
};

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