import React, {
  useCallback
} from 'react';

import {
  ListComponent
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

import {
  ITestingProps
} from '../../types';

interface IDemoListItemInfo {
  title: string;
  img: string;
  money: string;
}

const listDataSource: IDemoListItemInfo[] = [{
  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'
}];

export default function Testing({
  component
}: ITestingProps<ListComponent>): JSX.Element {
  const List = component;
  
  const renderItem = useCallback((item: IDemoListItemInfo, i: number): JSX.Element => {
    return <List.Item {...{
      key: i,
      extra: item.money,
      title: item.title,
      media: <img src={item.img} alt="列表" style={{
        height: '24px',
        width: '24px'
      }} />
    }}>List Item #{i}</List.Item>;
  }, [List]);

  return <>
    <H3>基础列表</H3>
    <List<IDemoListItemInfo> {...{
      header: <div>Notifications</div>,
      dataSource: listDataSource,
      renderItem,
      size: 'small'
    }} />
  </>;
}