import React from "react"
import {
  StyleSheet,
  View,
  Image,
  ScrollView,
  Text,
  TextInput,
  KeyboardAvoidingView,
  Platform,
  TouchableOpacity,
} from "react-native"
import MapView, { Marker } from "react-native-maps"
import { FormBinder } from "react-form-binder"
import {
  Icon,
  Header,
  BoundInput,
  BoundButton,
  BoundOptionStrip,
  BoundHeader,
  BoundPhotoPanel,
  FormStaticInput,
} from "../ui"
import { MessageModal, WaitModal } from "../Modal"
import autobind from "autobind-decorator"
import KeyboardSpacer from "react-native-keyboard-spacer"
import { isIphoneX } from "react-native-iphone-x-helper"
import { api } from "../API"
import { formatLatLng } from "../util"
import moment from "moment"
import "url-search-params-polyfill"

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: "#DDDDDD",
  },
  panel: {
    width: "94%",
    backgroundColor: "white",
    alignSelf: "center",
    marginTop: "3%",
    shadowColor: "gray",
    shadowOffset: { width: 2, height: 2 },
    shadowRadius: 2,
    shadowOpacity: 0.5,
    padding: 10,
  },
  label: {
    fontSize: 14,
    marginBottom: 4,
  },
})

export class Activity extends React.Component {
  static bindings = {
    header: {
      noValue: true,
      isDisabled: (r) => !(r.anyModified && r.allValid),
    },
    resolution: {
      isValid: (r, v) => v !== "",
    },
    notes: {
      isValid: (r, v) => v !== "",
    },
    photos: {
      isValid: (r, v) => v && v.length > 0,
      initValue: [],
    },
    status: {
      isValid: (r, v) => v !== "",
      alwaysGet: true,
    },
    workItem: {
      isValid: true,
      alwaysGet: true,
    },
    team: {
      isValid: true,
      alwaysGet: true,
    },
  }

  constructor(props) {
    super(props)
    this.state = {
      binder: new FormBinder({}, Activity.bindings),
      waitModal: null,
      messageModal: null,
    }

    const { search } = this.props.location
    const params = search ? new URLSearchParams(search) : { get: () => null }
    const id = params.get("id")
    const workItemId = params.get("workItemId")

    const getWorkItem = (id) => {
      api
        .getWorkItem(id)
        .then((workItem) => {
          if (workItem) {
            const [lng, lat] = workItem.location.coordinates

            this.setState({
              binder: new FormBinder(
                {
                  ...this.state.binder.getOriginalFieldValues(),
                  workItem: workItem._id,
                  team: api.loggedInUser.team,
                },
                Activity.bindings
              ),
              region: {
                latitude: lat,
                longitude: lng,
                latitudeDelta: 0.01,
                longitudeDelta: 0.01,
              },
              location: formatLatLng(lat, lng),
              dateTime: moment().format(),
            })
          }
        })
        .catch((err) => {
          this.setState({
            messageModal: {
              icon: "hand",
              message: "Unable to get work item details",
              detail: err.message,
              back: true,
            },
          })
        })
    }

    if (id) {
      api
        .getActivity(id)
        .then((activity) => {
          if (activity) {
            this.setState({
              binder: new FormBinder(activity, Activity.bindings),
            })

            return getWorkItem(activity.workItem)
          }
        })
        .catch((err) => {
          this.setState({
            messageModal: {
              icon: "hand",
              message: "Unable to get activity details",
              detail: err.message,
              back: true,
            },
          })
        })
    } else {
      if (workItemId) {
        getWorkItem(workItemId)
      } else {
        this.handleBackPress()
      }
    }
  }

  @autobind
  handleMessageDismiss() {
    const back = this.state.messageModal.back
    this.setState({ messageModal: null })
    if (back) {
      this.handleBackPress()
    }
  }

  @autobind
  handleBackPress() {
    const { history } = this.props

    if (history.length > 1) {
      history.goBack()
    } else {
      history.replace("/home")
    }
  }

  @autobind
  handleDonePress() {
    const { binder } = this.state
    let obj = binder.getModifiedFieldValues()

    if (!obj._id) {
      api
        .createActivity(obj)
        .then((activity) => {
          this.handleBackPress()
        })
        .catch((error) => {
          this.setState({
            messageModal: {
              icon: "hand",
              message: "Unable to create activity",
              detail: error.message,
            },
          })
        })
    } else {
      api
        .updateActivity(obj)
        .then((activity) => {
          this.handleBackPress()
        })
        .catch((error) => {
          this.setState({
            messageModal: {
              icon: "hand",
              message: "Unable to update activity",
              detail: error.message,
            },
          })
        })
    }
  }

  @autobind
  handleUploadStarted() {
    this.setState({ waitModal: { message: "Uploading Photo..." } })
  }

  @autobind
  handleUploadEnded() {
    this.setState({ waitModal: null })
  }

  render() {
    const {
      binder,
      messageModal,
      waitModal,
      region,
      dateTime,
      location,
    } = this.state

    return (
      <View style={{ width: "100%", height: "100%" }}>
        <BoundHeader
          binder={binder}
          name="header"
          title="Activity"
          leftButton={{ icon: "back", onPress: this.handleBackPress }}
          rightButton={{ icon: "done", onPress: this.handleDonePress }}
        />
        <ScrollView style={styles.container}>
          <View style={styles.panel}>
            <BoundInput binder={binder} name="resolution" label="Resolution:" />
          </View>
          <View style={styles.panel}>
            <BoundOptionStrip
              binder={binder}
              options={[
                { value: "planned", text: "Planned" },
                { value: "open", text: "Open" },
                { value: "onHold", text: "On Hold" },
                { value: "closed", text: "Closed" },
              ]}
              label="Status:"
              name="status"
            />
          </View>
          <View style={styles.panel}>
            <BoundInput binder={binder} name="notes" label="Notes:" />
          </View>
          <View style={styles.panel}>
            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
            <FormStaticInput label="Location:" value={location} />
            <View style={{ flexDirection: "column", justifyContent: "center" }}>
              <MapView
                style={{
                  flexDirection: "column",
                  justifyContent: "center",
                  width: "100%",
                  height: 400,
                  marginTop: 10,
                }}
                zoomControlEnabled={false}
                zoomEnabled={false}
                scrollEnabled={false}
                rotateEnabled={false}
                pitchEnabled={false}
                showsIndoors={false}
                showsTraffic={false}
                showsCompass={false}
                showsScale={false}
                showsUserLocation
                cacheEnabled
                region={region}
              />
              <Icon
                name="target"
                size={24}
                pointerEvents={false}
                style={{
                  position: "absolute",
                  alignSelf: "center",
                }}
              />
            </View>
          </View>
          <View style={styles.panel}>
            <BoundPhotoPanel
              name="photos"
              binder={binder}
              onUploadStarted={this.handleUploadStarted}
              onUploadEnded={this.handleUploadEnded}
            />
          </View>
          {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
        </ScrollView>
        <WaitModal
          open={!!waitModal}
          message={waitModal ? waitModal.message : ""}
        />
        <MessageModal
          open={!!messageModal}
          icon={messageModal ? messageModal.icon : ""}
          message={messageModal ? messageModal.message : ""}
          detail={messageModal ? messageModal.detail : ""}
          onDismiss={messageModal && this.handleMessageDismiss}
        />
        {Platform.OS === "ios" && <KeyboardSpacer />}
      </View>
    )
  }
}