import React from 'react';
import styled from 'styled-components';

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

import {
  IDemoDataAlbum,
  ITestingProps
} from '../../types';
import {
  DATA_SOURCE_PURE_ALBUM
} from '../../const';

const ScTrack = styled.strong`
  margin-right: 1em;
`;

export default function Testing({
  component
}: ITestingProps<TableComponent>): JSX.Element {
  const Table = component;
  
  return <>
    <H3>泛型</H3>
    <P>通过对 Table 增加泛型，可以约束 dataSource、onRowClick、onRowMouseEnter、onRowMouseLeave 等回调的类型。</P>
    <Table<IDemoDataAlbum> {...{
      dataSource: DATA_SOURCE_PURE_ALBUM
    }}>
      <Table.Column<IDemoDataAlbum> {...{
        title: '专辑',
        dataIndex: 'title'
      }} />
      <Table.Column<IDemoDataAlbum> {...{
        title: '乐队',
        dataIndex: 'artist'
      }} />
      <Table.Column<IDemoDataAlbum> {...{
        title: '发行',
        dataIndex: 'year'
      }} />
      <Table.Column<IDemoDataAlbum> {...{
        title: '曲目',
        dataIndex: 'year',
        cell: (_v: void, _i: number, o: IDemoDataAlbum) => o.tracks.map(v => <ScTrack>《{v}》</ScTrack>)
      }} />
    </Table>
  </>;
}