import React, { Component } from 'react';
import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';
import { View } from 'react-native';
let SWIPER_ID = 0;
export class Carousel extends Component {
    constructor(props) {
        super(props);
        this.id = SWIPER_ID++;
    }
    render() {
        const { height, style, children, webOptions, webPaddingBottom, showsPagination, loop, currentPageIndicatorColor, pageIndicatorColor } = this.props;
        const _showsPagination = typeof showsPagination === 'undefined' ? true : showsPagination;
        const _children = children;
        return (<View style={style}>
        <div id={`web-swiper-${this.id}`}>
          <Swiper loop={loop} pagination={_showsPagination ? {
            el: `.swiper-pagination`,
            clickable: true
        } : {}} {...webOptions}>
            {_children.map((child, i) => {
            return (<View key={i} style={{ height }}>
                  {child}
                </View>);
        })}
          </Swiper>
        </div>
        
        {currentPageIndicatorColor && (<style>
            {`#web-swiper-${this.id}
             .swiper-pagination-bullet.swiper-pagination-bullet-active {
                background-color: ${currentPageIndicatorColor} }`}
          </style>)}
        {pageIndicatorColor && (<style>
            {`#web-swiper-${this.id}
            .swiper-pagination-bullet {
              background-color: ${pageIndicatorColor}; opacity: 1 }`}
          </style>)}
        {webPaddingBottom && (<style>
            {`#web-swiper-${this.id}
            .swiper-wrapper {
              padding-bottom: ${webPaddingBottom}px }`}
          </style>)}
      </View>);
    }
}
//# sourceMappingURL=Carousel.web.js.map