import React, {
  LegacyRef
} from 'react';
import styled from 'styled-components';

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

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

const ScDiv = styled.div`
  height: 200px;
  width: 200px;
  border: 1px solid #eee;
  overflow: auto;
`;

const dataSource: JSX.Element[] = [];

function generateLi(index: number): JSX.Element {
  if (index % 3 === 0) {
    return <li {...{
      key: `key-${index}`,
      style: {
        lineHeight: '30px', background: '#5f83ff', color: '#fff'
      }
    }}>key-{index}</li>;
  }

  return <li key={`key-${index}`} style={{
    lineHeight: '20px'
  }}>key-{index}</li>;
}

function itemsRenderer(items: JSX.Element[], ref: LegacyRef<HTMLUListElement>): JSX.Element {
  // eslint-disable-next-line no-console
  console.log(items, ref);

  return <ul ref={ref}>{items}</ul>;
}

function itemSizeGetter(index: number): number {
  return index % 3 === 0 ? 30 : 20;
}

for (let i = 0; i < 1000; i++) {
  dataSource.push(generateLi(i));
}

export default function Testing({
  component
}: ITestingProps<VirtualListComponent>): JSX.Element {
  const VirtualList = component;

  return <>
    <H3>简单用法</H3>
    <ScDiv>
      <VirtualList<HTMLUListElement> {...{
        jumpIndex: 5,
        itemsRenderer,
        itemSizeGetter
      }}>{dataSource}</VirtualList>
    </ScDiv>
  </>;
}