import React from 'react';

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

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

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import styles from './index.scoped.less';

const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => <div style={{
  width: '25%'
}} key={item}>
  <h4 className="h4">{item}</h4>
</div>);

const sliderOnChange: (index: number) => void = index => {
  // eslint-disable-next-line no-console
  console.log('change Slide index', index);
};

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

  return <>
    <H3>多图轮播</H3>
    <div>slide one picture one at a time</div>
    <Slider slidesToShow={4} arrowPosition="outer" dots={false} lazyLoad>
      {slides}
    </Slider>
    <div>slide multiple picture one at a time</div>
    <Slider
      slidesToShow={4}
      slidesToScroll={4}
      arrowPosition="outer"
      lazyLoad
      dots={false} >
      {slides}
    </Slider>
    <H3>自定义导航锚点</H3>
    <Slider
      dotsClass={styles['dots-cust']}
      dotsDirection="hoz"
      arrows={false}
      dotsRender={(index, current) => {
        // eslint-disable-next-line no-console
        console.log('current', current);

        // eslint-disable-next-line jsx-a11y/anchor-is-valid
        return <a>{index}</a>;
      }} >
      {slides}
    </Slider>
    <H3>Fade</H3>
    <Slider
      arrowPosition="outer"
      animation="fade"
      dots={false}
      infinite
      speed={500}
      slidesToShow={1}
      slidesToScroll={1}
      onChange={sliderOnChange}>{slides}</Slider>
  </>;
}