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

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

const ListDemo = () => {
  return (
    <View>
      <Text className="demo-title">basic</Text>
      <View>
        <List>
          <List.Item title="主标题文字" action></List.Item>
          <List.Item title="主标题文字" description="副标题文字"></List.Item>
          <List.Item title="主标题文字" description="副标题文字" extra="说明文字"></List.Item>
        </List>
      </View>
      <Text className="demo-title">Content</Text>
      <View>
        <List>
          <List.Item>
            <List.ItemTitle>主标题文字</List.ItemTitle>
          </List.Item>
          <List.Item>
            <List.ItemTitle>主标题文字</List.ItemTitle>
          </List.Item>
          <List.Item>
            <List.ItemTitle>主标题文字</List.ItemTitle>
          </List.Item>
        </List>
      </View>
      <Text className="demo-title">Content + Container2</Text>
      <View>
        <List>
          <List.Item>
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <Icon name="prompt" />
            </List.ItemAction>
          </List.Item>
          <List.Item>
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <Icon name="checkbox" />
            </List.ItemAction>
          </List.Item>
          <List.Item>
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <Icon name="warning" />
            </List.ItemAction>
          </List.Item>
        </List>
      </View>

      <Text className="demo-title">Container1 + Content</Text>
      <View>
        <List>
          <List.Item
            media={
              <List.ItemMedia>
                <Checkbox size="medium"></Checkbox>
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <Checkbox size="medium"></Checkbox>
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
          </List.Item>
          <List.Item
            media={
              <List.ItemMedia>
                <Checkbox size="medium" checked></Checkbox>
              </List.ItemMedia>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
          </List.Item>
        </List>
      </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>
            }
          >
            <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>
            }
          >
            <List.ItemTitle>主标题文字</List.ItemTitle>
            <List.ItemAction>
              <List.ItemCaption>说明文字</List.ItemCaption>
              <Icon name="arrow-right" />
            </List.ItemAction>
          </List.Item>
        </List>
      </View>
      <Text className="demo-title">Container1 + Content + Container2</Text>
      <View>
        <List>
          <List.Item
            media={
              <List.ItemMedia>
                <View />
              </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>
                <View />
              </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>
                <View />
              </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