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

import './index.css';

const SliderDemo = () => {
  const [activeIndex, setActiveIndex] = useState(1);
  const ref = useRef(null);

  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">slide manually</View>
      <View className="demo-content slider-content">
        <Slider ref={ref} width={690} height={372} activeIndex={activeIndex} autoplay={false} infinite={false}>
          {imgs.map((img) => {
            return (
              <Slider.Item key={img}>
                <View className="item-wrapper">
                  <Image
                    className="img"
                    source={{
                      uri: img,
                    }}
                  />
                </View>
              </Slider.Item>
            );
          })}
        </Slider>
      </View>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">切换至</View>
          <View className="demo-item-content">
            <Radio.Group
              direction="hoz"
              size="small"
              dataSource={[0, 1, 2]}
              onChange={(index) => {
                ref.current.slideTo(index);
              }}
            />
          </View>
        </View>
      </View>
    </View>
  );
};

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