import React, { Component } from 'react';
import {
  ActivityIndicator,
  KeyboardAvoidingView,
  TouchableHighlight,
  TouchableWithoutFeedback,
  StyleSheet,
  TextInput,
  Keyboard,
  Text,
  View
} from 'react-native';

import hosts from '../db/hosts'

const validator = require("email-validator")

import ScrollableContainer from '../components/scrollableContainer'
import ClearText from '../components/text'
import Heading from '../components/heading'
import Button from '../components/button'
import CheckBox from '../components/checkbox'
import Modal from '../components/modal'

export default class Contact extends Component {
  constructor() {
    super()
    this.state = {
      name: '',
      email: '',
      message: '',
      track: false,
      publish: false,
      sending: false,
      done: false,
    }
    this.setName = this.setName.bind(this)
    this.setEmail = this.setEmail.bind(this)
    this.setTrack = this.setTrack.bind(this)
    this.setPublish = this.setPublish.bind(this)
    this.setMessage = this.setMessage.bind(this)
    this.send = this.send.bind(this)
    this.reset = this.reset.bind(this)
  }
  setName(name) {
    this.setState({ name, error: false })
  }
  setEmail(email) {
    this.setState({ email, error: false })
  }
  setTrack(track) {
    this.setState({ track: ! track })
  }
  setPublish(publish) {
    this.setState({ publish: ! publish })
  }
  setMessage(message) {
    this.setState({ message: message })
  }
  send() {
    var isValidEmail = validator.validate(this.state.email)
    if (! isValidEmail) {
      // return this.setState({ error: true })
      this.setState({ sending: true, track: false })
    }
    else {
      this.setState({ sending: true })
    }
//     fetch('POST', hosts.feedback, {
//       'Content-Type' : 'multipart/form-data',
//     }, [
//       { name: 'name', data: this.state.name },
//       { name: 'email', data: this.state.email },
//       { name: 'message', data: this.state.message },
//       { name: 'track', data: this.state.track },
//       { name: 'publish', data: this.state.publish },
//       { name: 'secret', data: 'iNr51NbvUDqbBzyray7gdZZjigDtlJj9' },
//     ]).then(() => {
//       this.setState({ done: true })
//     }).catch((e) => {
//       console.warn(e)
//       this.setState({ done: true })
//     })
  }
  reset() {
    this.setState({
      name: '',
      email: '',
      message: '',
      track: false,
      publish: false,
      sending: false,
      done: false,
    })
  }
  render() {
    return (
      <View>
        <ScrollableContainer heading='Contact' style={styles.container} bodyStyle={styles.body}>
          <View style={styles.innerContainer}>
            <ClearText style={styles.bodyText}>
              {this.props.content.body}
            </ClearText>
      
            {this.renderForm()}
            {this.renderComments()}
          </View>
              
        </ScrollableContainer>
        <Modal visible={this.state.sending}>
          {this.renderActivity()}
        </Modal>
      </View>
    )
  }
  renderForm() {
    let error = this.state.error ? (
      <ClearText>Please enter a valid email address</ClearText>
    ) : (
      <View></View>
    )
    return (
      <View style={styles.keyboardAvoidingViewInner}>
        <TextInput
          value={this.state.name}
          placeholder="Name"
          autoCorrect={false}
          onChangeText={this.setName}
          style={styles.textInput} />
        <TextInput
          value={this.state.email}
          placeholder="Email"
          autoCapitalize='none'
          autoCorrect={false}
          keyboardType='email-address'
          onChangeText={this.setEmail}
          style={styles.textInput} />
        {error}
        <TextInput
          multiline={true}
          placeholder="Enter your message"
          value={this.state.message}
          onChangeText={this.setMessage}
          style={[styles.textInput, styles.textArea]} />
        <View style={styles.checkboxes}>
          <CheckBox
            label='Sign me up for emails from the Armory'
            containerStyle={styles.checkboxContainerStyle}
            labelStyle={styles.checkboxLabelStyle}
            checked={this.state.track}
            onChange={this.setTrack} />
          <CheckBox
            label='Publish my comment for others to read'
            containerStyle={styles.checkboxContainerStyle}
            labelStyle={styles.checkboxLabelStyle}
            checked={this.state.publish}
            onChange={this.setPublish} />
        </View>
        <Button label='SEND' onPress={this.send} />
      </View>
    )
  }
  renderActivity() {
    let activity;
    if (! this.state.done) {
      activity = (
        <View style={styles.message}>
          <ActivityIndicator animating={true} color='#fff' />
          <Heading>Sending your message...</Heading>
        </View>
      )
    }
    else {
      activity = (
        <View style={styles.message}>
          <Heading>Thanks!</Heading>
          <ClearText>Your message has been delivered.</ClearText>
          <ClearText style={styles.lastMessage}>Thank you for your feedback.</ClearText>
          <Button onPress={this.reset} label='OK' />
        </View>
      )
    }
    return (
      <View style={styles.modal}>
        {activity}
      </View>
    )
  }
  renderComments() {
    const comments = this.props.comments.map( (comment, i) => {
      const date = comment[0].replace(/:\d\d$/,'')
      return (
        <View style={styles.comment} key={'comment_' + i}>
          <View style={styles.commentRow}>
            <ClearText style={styles.commentName}>{comment[1]}</ClearText>
            <ClearText style={styles.commentDate}>{date}</ClearText>
          </View>
          <ClearText style={styles.commentBody}>{comment[2]}</ClearText>
        </View>
      )
    })
    return (
      <TouchableWithoutFeedback>
        <View style={styles.comments}>
          {comments}
        </View>
      </TouchableWithoutFeedback>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    flex: 1,
  },
  body: {
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  innerContainer: {
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  bodyText: {
    width: 400,
    marginBottom: 20,
  },
  message: {
    backgroundColor: 'rgb(0,0,0)',
    borderRadius: 20,
    padding: 20,
  },
  modal: {
    backgroundColor: 'rgba(0,0,0,0.9)',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInput: {
    width: 350,
    height: 40,
    padding: 5,
    fontSize: 15,
    fontFamily: '"Futura-Medium", sans-serif',
    backgroundColor: 'white',
    borderColor: 'gray',
    borderWidth: 1,
    marginTop: 10,
    marginLeft: 5,
    marginBottom: 5,
    marginRight: 5,
  },
  textArea: {
    width: 350,
    height: 200,
  },
  checkboxes: {
    alignItems: 'flex-start',
    marginLeft: 5,
  },
  checkboxContainerStyle: {
    marginTop: 10,
  },
  checkboxLabelStyle: {
    color: '#ddd',
    fontFamily: '"Futura-Medium", sans-serif',
  },
  keyboardAvoidingViewInner: {
    alignItems: 'center',
  },
  lastMessage: {
    marginBottom: 10,
  },
  
  comments: {
    marginTop: 20,
    paddingBottom: 100,
    width: 400,
  },
  comment: {
    borderWidth: 1,
    borderColor: 'rgb(128,128,128)',
    padding: 10,
    margin: 10,
  },
  commentRow: {
    flexDirection: 'row',
  },
  commentName: {
    flex: 1,
    fontSize: 13,
    textAlign: 'left',
  },
  commentDate: {
    flex: 1,
    fontSize: 13,
    textAlign: 'right',
  },
  commentBody: {
    marginTop: 10,
    fontSize: 13,
    borderTopWidth: 1,
    borderTopColor: 'rgb(64,64,64)',
    textAlign: 'left',
  },
})