import React from "react"
import {
  StyleSheet,
  View,
  TouchableHighlight,
  TouchableOpacity,
  Image,
  FlatList,
  Text,
} from "react-native"
import { Icon, Header } from "../ui"
import { MessageModal } from "../Modal"
import { reactAutoBind } from "auto-bind2"
import { SwipeListView } from "react-native-swipe-list-view"
import { api } from "../API"
import {
  workItemTypeEnum,
  workItemTypeText,
  formatLatLng,
  parseLatLng,
  pad,
  geoDistance,
  dotify,
} from "../util"
import "url-search-params-polyfill"

const styles = StyleSheet.create({
  container: {
    height: "100%",
    width: "100%",
    justifyContent: "flex-start",
    backgroundColor: "#FFFFFF",
  },
})

export class WorkItemList extends React.Component {
  constructor(props) {
    super(props)
    reactAutoBind(this)
    this.state = {
      messageModal: null,
    }

    const { search } = this.props.location

    if (search) {
      const params = new URLSearchParams(search)
      const latLng = params.get("latLng")

      if (latLng) {
        const [lat, lng] = latLng.split(",")

        if (lat && lng) {
          this.position = {
            latitude: parseFloat(lat),
            longitude: parseFloat(lng),
          }
        }
      }
    }

    api
      .listWorkItems()
      .then((list) => {
        this.setState({ listItems: list.items })
      })
      .catch(() => {
        this.setState({
          messageModal: {
            icon: "hand",
            message: "Unable to get list of work items",
            detail: error.message,
          },
        })
      })
  }

  handleItemSelect(item, ref) {
    this.props.history.push(`/workItem?id=${item._id}`)
  }

  handleItemDelete(item, ref) {
    api
      .deleteWorkItem(item._id)
      .then(() => {
        return api
          .listWorkItems()
          .then((list) => {
            this.setState({ listItems: list.items })
          })
          .catch(() => {
            this.setState({
              messageModal: {
                icon: "hand",
                message: "Unable to get list of work items",
                detail: error.message,
              },
            })
          })
      })
      .catch(() => {
        this.setState({
          messageModal: {
            icon: "hand",
            message: "Unable to get delete work item",
            detail: error.message,
          },
        })
      })
  }

  handleMessageDismiss() {
    this.setState({ messageModal: null })
  }

  handleDonePress() {
    this.props.history.push("/workItem")
  }

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

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

  render() {
    const { listItems, messageModal } = this.state

    return (
      <View style={styles.container}>
        <Header
          title="Work Items"
          leftButton={{ icon: "back", onPress: this.handleBackPress }}
          rightButton={{ icon: "add", onPress: this.handleDonePress }}
        />
        <SwipeListView
          useFlatList
          style={{
            width: "100%",
            flexGrow: 1,
            paddingTop: 20,
            paddingBottom: 20,
          }}
          data={listItems}
          keyExtractor={(item) => item._id}
          renderItem={({ item }, rowMap) => (
            <TouchableHighlight
              style={{
                height: 50,
                paddingLeft: 20,
                paddingRight: 20,
                backgroundColor: "white",
              }}
              underlayColor="#EEEEEE"
              onPress={() => this.handleItemSelect(item, rowMap[item._id])}>
              <View
                style={{ height: "100%", width: "100%", flexDirection: "row" }}>
                <Text
                  style={{
                    fontSize: 10,
                    width: 45,
                    alignSelf: "center",
                  }}>
                  {pad(item.ticketNumber, 4)}
                </Text>
                <View
                  style={{
                    flexGrow: 1,
                    flexDirection: "column",
                    justifyContent: "center",
                  }}>
                  <Text style={{ fontSize: 20 }}>
                    {workItemTypeText[item.workItemType]}
                  </Text>
                  <Text style={{ fontSize: 14, color: "gray" }}>
                    {`${dotify(item.address) || "..."} | ${
                      this.position
                        ? geoDistance(
                            this.position.latitude,
                            this.position.longitude,
                            item.location.coordinates[1],
                            item.location.coordinates[0],
                            "K"
                          ).toFixed(2)
                        : "?"
                    } km`}
                  </Text>
                </View>
                <Icon
                  name="rightArrow"
                  size={16}
                  style={{ alignSelf: "center" }}
                />
              </View>
            </TouchableHighlight>
          )}
          renderHiddenItem={({ item }, rowMap) => (
            <TouchableOpacity
              style={{
                flexDirection: "row",
                justifyContent: "flex-end",
                height: 50,
                backgroundColor: "red",
              }}
              onPress={() => this.handleItemDelete(item, rowMap[item._id])}>
              <View
                style={{
                  flexDirection: "column",
                  justifyContent: "center",
                  backgroundColor: "red",
                  width: 75,
                }}>
                <Text style={{ fontSize: 20, alignSelf: "center" }}>
                  Delete
                </Text>
              </View>
            </TouchableOpacity>
          )}
          rightOpenValue={-80}
          stopRightSwipe={-120}
          disableRightSwipe
        />
        <MessageModal
          open={!!messageModal}
          icon={messageModal ? messageModal.icon : ""}
          message={messageModal ? messageModal.message : ""}
          detail={messageModal ? messageModal.detail : ""}
          onDismiss={messageModal && this.handleMessageDismiss}
        />
      </View>
    )
  }
}