import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import { Slider } from '@alifd/meet';
import View from 'rax-view';
import Image from 'rax-image';

import './index.css';

const SliderDemo = () => {
  const [activeIndex, setActiveIndex] = useState(2);

  const handleChange = (index) => {
    console.log(index);
    console.log(`slider to ${index}`);
  };
  const imgs = [
    'https://gw.alicdn.com/tfs/TB1sZMvUhv1gK0jSZFFXXb0sXXa-690-372.png',
    'https://gw.alicdn.com/tfs/TB1RDZoUaL7gK0jSZFBXXXZZpXa-690-372.png',
    'https://gw.alicdn.com/tfs/TB1rSwHgdTfau8jSZFwXXX1mVXa-690-372.png',
  ];

  return (
    <View>
      <View className="demo-title">basic</View>
      <View className="demo-content slider-content">
        <Slider
          width={690}
          height={372}
          activeIndex={activeIndex}
          autoplay={true}
          infinite={true}
          onChange={handleChange}
        >
          {imgs.map((img) => {
            return (
              <Slider.Item key={img}>
                <View className="item-wrapper">
                  <Image
                    className="img"
                    source={{
                      uri: img,
                    }}
                  />
                </View>
              </Slider.Item>
            );
          })}
        </Slider>
      </View>
    </View>
  );
};

// render(<SliderDemo />, null, { driver: DriverUniversal });
 export default SliderDemo