import React, { Component } from "react"
import Modal from "react-native-modal"
import PropTypes from "prop-types"
import { View, Image, TouchableOpacity } from "react-native"
import { Icon } from "../ui"
import { reactAutoBind } from "auto-bind2"

export class ImageViewerModal extends Component {
  static propTypes = {
    open: PropTypes.bool,
    imageURL: PropTypes.string.isRequired,
    onDismiss: PropTypes.func,
  }

  constructor(props) {
    super(props)
    reactAutoBind(this)
  }

  handleButtonPress() {
    const { onDismiss } = this.props

    if (onDismiss) {
      onDismiss()
    }
  }

  render() {
    const { open, icon, message, detail } = this.props

    return (
      <Modal isVisible={open}>
        <View
          style={{
            width: "100%",
            height: "100%",
          }}>
          <Image source={imageURL} />
          <View style={{ position: "absolute", left: 30, right: 0, top: 50 }}>
            <TouchableHighlight
              style={{
                height: 80,
                width: 80,
              }}
              onPress={this.handleBackPress}
              underlayColor={"#00000000"}>
              <Image source={backImage} />
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    )
  }
}