import React, { MutableRefObject, ReactNodeArray, useImperativeHandle, useRef } from 'react';
import Transition from 'styles/animation/Transition';
import Indicator from './indicator';
import { ICarousel } from './types';
import { Wrapper } from './style';

const preloadImgs = (imgs: ReactNodeArray, urls: string[]) => {
    imgs &&
        imgs.forEach((i: any) => {
            if (i.type === 'img' && i.props.src) {
                var t = new Image();
                t.src = i.props.src;
            }
        });
    urls.forEach((i: any) => {
        var t = new Image();
        t.src = i;
    });
};
const Carousel = React.forwardRef(function(props: ICarousel, ref: any) {
    const { children, imgs = [] } = props;

    useImperativeHandle(
        ref,
        () => {
            return { set: ref.current.set };
        },
        []
    );
    const preloaded: MutableRefObject<boolean> = useRef(false);
    if (!preloaded.current) {
        preloaded.current = true;
        preloadImgs(children, imgs);
    }
    return (
        <Wrapper width={props.width} height={props.height}>
            <Transition Indicator={Indicator} ref={ref} {...props}>
                {imgs.length ? imgs.map(i => <img key={i} src={i} />) : children}
            </Transition>
        </Wrapper>
    );
});
Carousel.defaultProps = {
    width: '100%',
    height: 100,
    playInterval: 3000,
    indicatorPosition: 'bottom',
    autoplay: true,
    hoverPause: true,
    clickAble: true,
    rewind: true,
    imgs: [],
    direction: 'horizontal',
};
export default Carousel;