import React, { Component } from "react"
import PropTypes from "prop-types"
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
  ActivityIndicator,
} from "react-native"
import { Icon } from "."
import { reactAutoBind } from "auto-bind2"
import { api } from "../API"

const photoSpacing = 10

export class PhotoPanel extends Component {
  static propTypes = {
    onPhotoPress: PropTypes.func,
    readOnly: PropTypes.bool,
    value: PropTypes.arrayOf(PropTypes.string),
  }

  constructor(props) {
    super(props)
    reactAutoBind(this)
    this.state = {
      photoSize: null,
    }
  }

  handleLayout(e) {
    if (!this.state.photoSize) {
      const { layout } = e.nativeEvent
      const ratio = 3 / 4
      const width = (layout.width - photoSpacing) / 2
      const height = width / ratio

      this.setState({ photoSize: { width, height } })
    }
  }

  render() {
    const { photoSize } = this.state
    const { value: assetIds, readOnly, onPhotoPress } = this.props
    const renderPhoto = (index) => {
      const assetId = assetIds && assetIds[index]

      return (
        <TouchableOpacity
          key={assetId || "blank" + index.toString()}
          disabled={readOnly}
          style={{
            width: photoSize.width,
            height: photoSize.height,
            borderWidth: 2,
            borderColor: "gray",
            borderRadius: 4,
            justifyContent: "center",
          }}
          onPress={() => onPhotoPress(index)}>
          {!assetId && (
            <Icon
              name={!readOnly ? "add" : "blank"}
              size={24}
              style={{ alignSelf: "center" }}
            />
          )}
          {assetId && (
            <Image
              source={{ uri: api.makeImageUrl(assetId) }}
              style={{ width: "100%", height: "100%" }}
              resizeMode="contain"
            />
          )}
        </TouchableOpacity>
      )
    }

    return (
      <View onLayout={this.handleLayout}>
        {photoSize && (
          <View style={styles.photoRow}>
            {renderPhoto(0)}
            {renderPhoto(1)}
          </View>
        )}
        {photoSize && (
          <View style={styles.photoRow}>
            {renderPhoto(2)}
            {renderPhoto(3)}
          </View>
        )}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  photoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    paddingTop: 5,
    paddingBottom: 5,
  },
})