import React, { Component } from 'react'
import {
  Text,
  View,
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Dimensions
} from 'react-native'
import Swiper from 'react-native-swiper'
import PhotoView from 'react-native-photo-view'
const { width, height } = Dimensions.get('window')

var styles = {
  wrapper: {
    backgroundColor: '#000',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  photo: {
    width,
    height,
    flex: 1
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },
  thumbWrap: {
    marginTop: 100,
    borderWidth: 5,
    borderColor: '#000',
    flexDirection: 'row'
  },
  thumb: {
    width: 50,
    height: 50
  }
}

const renderPagination = (index, total, context) => {
  return (
    <View
      style={{
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        top: 25,
        left: 0,
        right: 0
      }}
    >
      <View
        style={{
          borderRadius: 7,
          backgroundColor: 'rgba(255,255,255,.15)',
          padding: 3,
          paddingHorizontal: 7
        }}
      >
        <Text
          style={{
            color: '#fff',
            fontSize: 14
          }}
        >
          {index + 1} / {total}
        </Text>
      </View>
    </View>
  )
}

const Viewer = props => (
  <Swiper
    index={props.index}
    style={styles.wrapper}
    renderPagination={renderPagination}
  >
    {props.imgList.map((item, i) => (
      <View key={i} style={styles.slide}>
        <TouchableWithoutFeedback onPress={e => props.pressHandle()}>
          <PhotoView
            source={{ uri: item }}
            resizeMode="contain"
            minimumZoomScale={0.5}
            maximumZoomScale={3}
            androidScaleType="center"
            style={styles.photo}
          />
        </TouchableWithoutFeedback>
      </View>
    ))}
  </Swiper>
)

export default class extends Component {
  constructor(props) {
    super(props)
    this.state = {
      imgList: [
        'https://avatars3.githubusercontent.com/u/533360?v=3&s=466',
        'https://assets-cdn.github.com/images/modules/site/business-hero.jpg',
        'https://placeholdit.imgix.net/~text?txtsize=29&txt=350%C3%971150&w=350&h=1150'
      ],
      showViewer: true,
      showIndex: 0
    }
    this.viewerPressHandle = this.viewerPressHandle.bind(this)
    this.thumbPressHandle = this.thumbPressHandle.bind(this)
  }
  viewerPressHandle() {
    this.setState({
      showViewer: false
    })
  }
  thumbPressHandle(i) {
    this.setState({
      showIndex: i,
      showViewer: true
    })
  }
  render() {
    return (
      <View style={{ position: 'relative' }}>
        {this.state.showViewer && (
          <Viewer
            index={this.state.showIndex}
            pressHandle={this.viewerPressHandle}
            imgList={this.state.imgList}
          />
        )}
        <View style={styles.thumbWrap}>
          {this.state.imgList.map((item, i) => (
            <TouchableOpacity key={i} onPress={e => this.thumbPressHandle(i)}>
              <Image style={styles.thumb} source={{ uri: item }} />
            </TouchableOpacity>
          ))}
        </View>
      </View>
    )
  }
}