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

export class ApiModal extends Component {
  static propTypes = {
    open: PropTypes.bool,
    onDismiss: PropTypes.func,
  }

  constructor(props) {
    super(props)
    reactAutoBind(this)
    this.state = {
      value: api.backend,
    }
  }

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

    if (onDismiss) {
      onDismiss(this.state.value)
    }
  }

  handleValueChanged(newValue) {
    this.setState({ value: newValue })
  }

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

    return (
      <Modal isVisible={open}>
        <View
          style={{
            flexDirection: "column",
            justifyContent: "center",
            width: "100%",
            backgroundColor: "#FFFFFF",
            padding: 10,
          }}>
          <OptionStrip
            options={[
              { value: "normal", text: "Normal" },
              { value: "test", text: "Test" },
              { value: "local", text: "Local" },
            ]}
            value={value}
            onValueChanged={this.handleValueChanged}
          />
          <TouchableOpacity
            onPress={this.handleButtonPress}
            style={{
              alignSelf: "center",
              backgroundColor: "blue",
              marginTop: 30,
              marginBottom: 10,
              justifyContent: "center",
              paddingHorizontal: 10,
              height: 40,
              width: 100,
              backgroundColor: "#3BB0FD",
            }}>
            <Text style={{ alignSelf: "center", color: "black" }}>OK</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    )
  }
}