import * as React from "react";
import { storiesOf } from "@storybook/react";
import { List, Avatar ,Box, Button, Divider} from "@alicloudfe/components";
const data = [
  {
    title: 'A Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20'
  },
  {
    title: 'B Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$10'
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20'
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20'
  }
]
const data2 = [
  {
    title: '构建一套产品化设计系统',
    description:
      '随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …',
    author: '谢瑶 3 小时前更新',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'
  },
  {
    title: '构建一套产品化设计系统',
    description:
      '随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …',
    author: '谢瑶 3 小时前更新',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'
  },
  {
    title: '构建一套产品化设计系统',
    description:
      '随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …',
    author: '谢瑶 3 小时前更新',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'
  },
  {
    title: '构建一套产品化设计系统',
    description:
      '随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …',
    author: '谢瑶 3 小时前更新',
    img: 'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'
  }
]
const actions = (
  <Box
    direction="row"
    align="center"
    style={{ whiteSpace: 'nowrap', height: '100%', paddingLeft: 100 }}
  >
    <Button text type="primary">
      编辑
    </Button>
    <Divider direction="ver" />
    <Button text type="primary">
      订阅
    </Button>
    <Divider direction="ver" />
    <Button text type="primary">
      删除
    </Button>
  </Box>
)


storiesOf("List", module).add("List", () => {
  return (
    <div id="app-wrapper">
      <div id="app" style={{ padding: "16px" }}>
      <div >
      <List
        size="small"
        header={<div>Notifications</div>}
        dataSource={data}
        renderItem={(item, i) => (
          <List.Item
            key={i}
            extra={item.money}
            title={item.title}
            media={<Avatar src={item.img} />}
          >
            List Item {i}
          </List.Item>
        )}
      />
      <List
      dataSource={data2}
      renderItem={(item, i) => (
        <List.Item
          key={i}
          extra={actions}
          media={<img width="161" height="108" src={item.img} />}
          title={item.title}
        >
          <p style={{ margin: '12px 0' }}>{item.description}</p>
          <div>{item.author}</div>
        </List.Item>
      )}
    />

    </div>
      </div>
    </div>
  );
});
