import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import { Icon, List, Badge, Avatar, Switch, Button } from '@alifd/meet';

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

const ListDemo = () => {
  return (
    <View>
      <Text className="demo-title">Container1 + Content + Container2</Text>
      <View>
        <List>
          <List.Item
            media={
              <List.ItemMedia>
                <View />
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>

            <List.ItemAction>
              <List.ItemCaption>说明文字</List.ItemCaption>
              <Icon name="arrow-right" />
            </List.ItemAction>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <View />
              </List.ItemMedia>
            }
            arrow="right"
          >
            <List.ItemTitle>箭头+红点+文字</List.ItemTitle>
            <List.ItemAction>
                <Badge dot>
                  <Avatar size="small" shape="square"></Avatar>
                </Badge>
            </List.ItemAction>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <View />
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <Icon size="small" name="account"/>
              <Icon size="small" name="account"/>
              <Icon size="small" name="account"/>
            </List.ItemAction>
          </List.Item>

          <List.Item
            media={
              <List.ItemMedia>
                <View />
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <List.ItemCaption>说明文字</List.ItemCaption>
              <Badge dot />
              <Icon name="arrow-right" />
            </List.ItemAction>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <View />
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <Switch checked />
            </List.ItemAction>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <View />
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <Button size="small" type="primary">按钮</Button>
            </List.ItemAction>
          </List.Item>
        </List>
      </View>
      <Text className="demo-title">Container1 + Content + Container2</Text>
      <View>
        <List>
          <List.Item
            media={
              <List.ItemMedia>
                <Avatar shape="square"></Avatar>
              </List.ItemMedia>
            }
          >
            <List.ItemContent>
              <List.ItemTitle>主标题文字</List.ItemTitle>
              <List.ItemCaption>副标题文字</List.ItemCaption>
            </List.ItemContent>
            <List.ItemAction>
              <Icon name="arrow-right" />
            </List.ItemAction>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <Avatar shape="square"></Avatar>
              </List.ItemMedia>
            }
          >
            <List.ItemContent>
              <List.ItemTitle>主标题文字</List.ItemTitle>
              <List.ItemCaption>副标题文字</List.ItemCaption>
            </List.ItemContent>
            <List.ItemAction>
              <Icon name="arrow-right" />
            </List.ItemAction>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <Avatar></Avatar>
              </List.ItemMedia>
            }
          >
            <List.ItemContent>
              <List.ItemTitle>主标题文字</List.ItemTitle>
              <List.ItemCaption>二级标题文字</List.ItemCaption>
              <List.ItemCaption>三级标题文字</List.ItemCaption>
            </List.ItemContent>
            <List.ItemAction>
              <Icon name="arrow-right" />
            </List.ItemAction>
          </List.Item>
        </List>
      </View>
    </View>
  );
};

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