import React, { Component } from 'react';
import { Dimensions, Image, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
import { MultiCarousel } from '../MultiCarousel';
import { PhotoSwipe } from './PhotoSwipe.web';
const searchIcon = require('../../../assets/images/search.png');
let ZOOM_CAROUSEL_ID = 0;
const getSize = Image.getSize.bind(Image);
const S = StyleSheet.create({
    searchIcon: {
        width: 25,
        height: 25
    },
    zoomButtonContainer: {
        position: 'absolute',
        right: 50,
        bottom: 30,
        zIndex: 101
    },
    zoomButton: {
        opacity: 0.5
    },
    goToNext: {
        position: 'absolute',
        top: '50%',
        right: 0,
        zIndex: 100,
        marginTop: -15,
        padding: 10
    },
    goToPrev: {
        position: 'absolute',
        top: '50%',
        left: 0,
        zIndex: 100,
        marginTop: -15,
        padding: 10
    },
    buttonPrevIcon: {
        width: 25,
        height: 25,
        borderTopWidth: 2,
        borderLeftWidth: 2,
        borderColor: 'black',
        transform: [
            {
                rotate: '-45deg'
            }
        ]
    },
    buttonNextIcon: {
        width: 25,
        height: 25,
        borderTopWidth: 2,
        borderRightWidth: 2,
        borderColor: 'black',
        transform: [
            {
                rotate: '45deg'
            }
        ]
    },
    thumbnailImg: {
        width: '100%',
        height: '100%'
    },
    thumbnail: {
        marginRight: 10,
        width: 50,
        height: 50
    },
    thumbnailContainer: {
        margin: 10
    },
    thumbnailSelected: {
        borderWidth: 3,
        borderColor: 'red'
    }
});
export class ZoomCarousel extends Component {
    constructor(props) {
        super(props);
        this.goToNext = () => {
            this.multiCarousel.goToNext();
        };
        this.goToPrev = () => {
            this.multiCarousel.goToPrev();
        };
        this.openZoom = () => {
            this.setState({
                isZooming: true
            });
        };
        this.closeZoom = () => {
            this.setState({
                isZooming: false
            });
        };
        this.handleSlideChange = ({ currentIndex, nextIndex }) => {
            this.setState({
                currentIndex: nextIndex
            });
        };
        this.handleZoomCarouselChange = (pswp) => {
            const currentIndex = pswp.getCurrentIndex();
            this.setState({ currentIndex });
            this.multiCarousel.goTo(currentIndex);
        };
        this.handleLayoutChange = (e) => {
            const { centerMode, peekSize = 0, gapSize = 0 } = this.props;
            const screenWidth = Dimensions.get('window').width;
            const itemWidth = centerMode
                ? screenWidth - 2 * peekSize - gapSize
                : screenWidth - peekSize;
            const imageWidth = itemWidth - gapSize;
            const imageHeight = itemWidth - gapSize;
            this.setState({
                imageWidth,
                imageHeight,
                screenWidth
            });
        };
        this.goTo = (i) => {
            this.multiCarousel.goTo(i);
        };
        this.handleThumbPress = (i) => () => {
            this.goTo(i);
        };
        this.extractMultiCarousel = (ref) => {
            this.multiCarousel = ref;
        };
        this.renderImage = (item) => {
            return (<View>
        <Image source={item.src} resizeMode='contain' style={{
                width: this.state.imageWidth,
                height: this.state.imageHeight
            }}/>
      </View>);
        };
        const screenWidth = Dimensions.get('window').width;
        const peekSize = props.peekSize || 0;
        const gapSize = props.gapSize || 0;
        this.id = ZOOM_CAROUSEL_ID++;
        const itemWidth = props.centerMode
            ? screenWidth - 2 * peekSize - gapSize
            : screenWidth - peekSize;
        const imageWidth = itemWidth - gapSize;
        const imageHeight = itemWidth - gapSize;
        this.state = {
            isZooming: false,
            currentIndex: 0,
            imageSizes: [],
            imageWidth,
            imageHeight,
            screenWidth
        };
        props.images.forEach((img, i) => {
            const uri = img.src.uri;
            if (uri) {
                getSize(uri, (width, height) => {
                    const imageSizes = this.state.imageSizes;
                    imageSizes[i] = { width, height };
                    this.setState({
                        imageSizes
                    });
                }, err => {
                    console.warn('image getSize failed', err);
                });
            }
        });
    }
    render() {
        const { peekSize = 0, gapSize = 0 } = this.props;
        return (<View onLayout={this.handleLayoutChange}>
        <View>
          <div id={`zoom-carousel-${this.id}`}>
            <MultiCarousel ref={this.extractMultiCarousel} onSlideChange={this.handleSlideChange} peekSize={peekSize + (this.props.centerMode ? gapSize / 2 : 0)} itemsPerPage={1} items={this.props.images} renderItem={this.renderImage} showArrow={this.props.showArrow} dotStyle={this.props.dotStyle} dotActiveStyle={this.props.dotActiveStyle} pageIndicatorStyle={this.props.pageIndicatorStyle} zoomButtonStyle={this.props.zoomButtonStyle} renderPageIndicator={this.props.renderPageIndicator} centerMode={this.props.centerMode}/>

            <View style={[S.zoomButtonContainer, this.props.zoomButtonStyle]}>
              {this.props.renderZoomButton ? (this.props.renderZoomButton(this.openZoom)) : (<TouchableOpacity style={S.zoomButton} onPress={this.openZoom}>
                  <Image style={S.searchIcon} source={searchIcon}/>
                </TouchableOpacity>)}
            </View>

            <PhotoSwipe isOpen={this.state.isZooming} items={this.props.images
            .map(img => img.zoomSrc || img.src)
            .map((img, i) => ({
            src: img.uri || img,
            w: this.state.screenWidth,
            h: this.state.imageSizes[i]
                ? this.state.screenWidth *
                    this.state.imageSizes[i].height /
                    this.state.imageSizes[i].width
                : this.state.imageHeight
        }))} options={{
            loop: false,
            fullscreenEl: false,
            shareEl: false,
            captionEl: false,
            history: false,
            closeOnScroll: false,
            index: this.state.currentIndex
        }} afterChange={this.handleZoomCarouselChange} onClose={this.closeZoom}/>
          </div>
        </View>

        {this.props.showThumbnails &&
            (this.props.renderThumbnails ? (this.props.renderThumbnails(this.state.currentIndex, this.goTo)) : (<ScrollView horizontal={true} contentContainerStyle={[
                S.thumbnailContainer,
                this.props.thumbnailContainerStyle
            ]}>
              {this.props.images.map((img, i) => (<TouchableOpacity key={i} style={[
                S.thumbnail,
                this.props.thumbnailStyle,
                this.state.currentIndex === i && S.thumbnailSelected
            ]} onPress={this.handleThumbPress(i)}>
                  <Image resizeMode='cover' source={img.src} style={S.thumbnailImg}/>
                </TouchableOpacity>))}
            </ScrollView>))}
      </View>);
    }
}
ZoomCarousel.defaultProps = {
    images: [],
    peekSize: 0,
    gapSize: 0
};
//# sourceMappingURL=ZoomCarousel.web.js.map