import React, { Component } from 'react';
// import { Dimensions } from 'react-native';
import PropTypes from 'prop-types';
// import { DataProvider, LayoutProvider } from 'recyclerlistview';
// import _ from 'lodash';
import Gallery from '~comp/SharedPlaylist/Gallery';

// const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

export class ZoomableViewPager extends Component {
	static propTypes = {
		data: PropTypes.array.isRequired,
		onPageSelected: PropTypes.func,
		onTap: PropTypes.func,
		initialRenderIndex: PropTypes.number,
		rowRenderer: PropTypes.func,
	};

	static defaultProps = {
		onPageSelected: () => { },
		onTap: () => {},
		initialRenderIndex: 0,
		rowRenderer: () => { },
	};

	constructor(props) {
		super(props);

		this.state = {
			index: props.initialRenderIndex,
			// dataProvider: new DataProvider((r1, r2) => !_.isEqual(r1, r2)).cloneWithRows(props.data),
		};

		// this.layoutProvider = new LayoutProvider(
		// 	() => 0,
		// 	// eslint-disable-next-line no-param-reassign
		// 	(type, dim) => { dim.width = screenWidth; dim.height = screenHeight; },
		// );
	}

	render() {
		// console.log('PROPS DATA: ', this.props.data)
		const {
			onPageSelected, onTap, rowRenderer, data,
		} = this.props;
		return (
			<Gallery
				{...this.props}
				style={{ flex: 1, backgroundColor: 'black' }}
				images={data}
				extraData={this.state}
				initialPage={this.state.index}
				enableZoom={false}
				onSingleTapConfirmed={onTap}
				onPageSelected={onPageSelected}
				imageComponent={(imageProps, imageDimensions, pageData) => rowRenderer(
					imageProps,
					imageDimensions,
					pageData,
				)}
			/>
		);
	}
}
