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 autobind from "autobind-decorator"
import { SwipeListView } from "react-native-swipe-list-view"
import { api } from "../API"

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

const data = [
  {
    key: "1",
    type: "work",
    location: "Ossington Ave. | 0.2 mi.",
    state: "open",
    latlng: { latitude: 43.653226, longitude: -79.383184 }
  },
  {
    key: "2",
    type: "inspection",
    location: "Alexandre St. | 0.7 mi.",
    state: "open",
    latlng: { latitude: 43.648118, longitude: 79.392636 }
  },
  {
    key: "3",
    type: "complaint",
    location: "Bay St. | 0.8 mi.",
    state: "open",
    latlng: { latitude: 43.640168, longitude: -79.409373 }
  },
  {
    key: "4",
    type: "work",
    location: "Bloor St. | 1.2 mi.",
    state: "open",
    latlng: { latitude: 43.63311, longitude: -79.41588 }
  },
  {
    key: "5",
    type: "inspection",
    location: "Blue Jays Way | 2.2 mi.",
    state: "open",
    latlng: { latitude: 43.653526, longitude: -79.361385 }
  },
  {
    key: "6",
    type: "complaint",
    location: "Christie St. | 3.0 mi.",
    state: "open",
    latlng: { latitude: 43.66387, longitude: -79.383705 }
  },
  {
    key: "7",
    type: "work",
    location: "Cummer Ave. | 4.2 mi.",
    state: "open",
    latlng: { latitude: 43.659166, longitude: -79.39135 }
  },
  {
    key: "8",
    type: "complaint",
    location: "Danforth Ave. | 4.7 mi.",
    state: "open",
    latlng: { latitude: 43.663538, longitude: -79.423212 }
  }
]

const inspectionTypes = {
  work: {
    title: "Work Order"
  },
  inspection: {
    title: "Inspection"
  },
  complaint: {
    title: "Complaint"
  }
}

export class WorkItemList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      messageModal: null
    }
    api
      .listWorkItems()
      .then(list => {})
      .catch(() => {
        this.setState({
          messageModal: {
            icon: "hand",
            message: "Unable to get list of work items",
            detail: error.message
          }
        })
      })
  }

  @autobind
  handleItemSelect(item, index) {
    this.props.history.push("/workitem")
  }

  @autobind
  handleItemDelete(item, index) {
  }

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

  @autobind
  handleAddPress(item, index) {
    this.props.history.push("/workitem")
  }

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

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

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

    return (
      <View style={styles.container}>
        <Header
          title="Work Items"
          leftButton={{ icon: "back", onPress: this.handleBackPress }}
          rightButton={{ icon: "add", onPress: this.handleAddPress }}
        />
        <SwipeListView
          useFlatList
          style={{
            width: "100%",
            flexGrow: 1,
            paddingTop: 20,
            paddingBottom: 20
          }}
          data={data}
          renderItem={({ item, index }) => (
            <TouchableHighlight
              style={{
                height: 50,
                paddingLeft: 20,
                paddingRight: 20,
                backgroundColor: "white",
              }}
              underlayColor='#EEEEEE'
              onPress={() => this.handleItemSelect(item, index)}
            >
              <View style={{ height: '100%', width: '100%', flexDirection: 'row'  }}>
                <View style={{ flexGrow: 1, flexDirection: "column", justifyContent: 'center' }}>
                  <Text style={{ fontSize: 20 }}>
                    {inspectionTypes[item.type].title}
                  </Text>
                  <Text style={{ fontSize: 14, color: "gray" }}>
                    {item.location}
                  </Text>
                </View>
                <Icon
                  name="rightArrow"
                  size={16}
                  style={{ alignSelf: "center" }}
                />
              </View>
            </TouchableHighlight>
          )}
          renderHiddenItem={({ item, index }) => (
            <TouchableOpacity
              style={{
                flexDirection: "row",
                justifyContent: "flex-end",
                height: 50,
                backgroundColor: "red",
              }}
              onPress={() => this.handleItemDelete(item, index)}
            >
              <View style={{ flexDirection: 'column', justifyContent: 'center', backgroundColor: "red", width: 75 }}>
                <Text style={{ fontSize: 20, alignSelf: "center" }}>
                  Delete
                </Text>
              </View>
            </TouchableOpacity>
          )}
          rightOpenValue={-80}
          stopLeftSwipe={100}
          disableRightSwipe
        />
        <MessageModal
          open={!!messageModal}
          icon={messageModal ? messageModal.icon : ""}
          message={messageModal ? messageModal.message : ""}
          detail={messageModal ? messageModal.detail : ""}
          onDismiss={messageModal && this.handleMessageDismiss}
        />
      </View>
    )
  }
}