import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { Carousel } from '@ant-design/react-native';
import { Image } from 'react-native-magnus';
import { useCreation } from '@umijs/hooks';
import useModel from 'flooks';
import HomeModel from './model';

export default function Banner({ type, height, round, noDots }) {
  const { bannerList } = useModel(HomeModel, ['bannerList']);
  const [index, setIndex] = React.useState(0);

  const showList = useCreation(() => {
    if (type) {
      return bannerList.filter((item) => {
        return item.type === type;
      });
    } else {
      return bannerList;
    }
  }, [type, bannerList]);

  React.useEffect(() => {
    setIndex(0);
  }, [type]);

  if (showList.length > 0) {
    return (
      <Carousel
        style={styles.wrapper}
        selectedIndex={index}
        autoplay
        infinite
        afterChange={setIndex}
        dots={!noDots}
      >
        {showList.map(
          (item) =>
            !!item.pic && (
              <Image
                key={item.id}
                rounded={round ? 'xs' : 'none'}
                source={{
                  uri: item.pic,
                }}
                w="100%"
                h={height || 80}
              />
            )
        )}
      </Carousel>
    );
  } else {
    return null;
  }
}

const styles = StyleSheet.create({
  wrapper: {
    // height: 80,
  },
});