import React, { Component } from 'react'
import { connect } from 'react-redux'

import { Arrow } from '../nav/viewer.icons'
import { Loader } from 'app/common/loader.component'
import { isHandheld } from 'app/utils'
import { ENV_PRODUCTION } from 'app/constants'

import * as subscriptionActions from './subscription.actions'

const initialState = {
  email: "",
  agreed: false,
  subscribed: false,
  success: false,
  loading: false,
}

export default class SubscriptionForm extends Component {
  state = {
    ...initialState
  }
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleCheckbox = this.handleCheckbox.bind(this)
    this.handleReset = this.handleReset.bind(this)
  }
  handleChange(e) {
    this.setState({ email: e.target.value })
  }
  handleCheckbox(e) {
    this.setState({ agreed: e.target.checked })
  }
  handleKeyDown(e) {
    // disable tab
    if (e.keyCode === 9) {
      e.preventDefault()
    }
  }
  handleSubmit(e) {
    e.preventDefault()
    if (!this.state.agreed || this.state.loading) {
      return
    }
    if (ENV_PRODUCTION) {
      this.setState({ loading: true })
      subscriptionActions.subscribe(this.state.email)
      .then(res => {
        this.setState({ loading: false, subscribed: true, success: res.ok })
      })
      .catch(err => {
        this.setState({ loading: false, subscribed: true, success: false })
      })
    } else {
      this.setState({ loading: true })
      setTimeout(() => {
        this.setState({ loading: false, subscribed: true, success: true })
      }, 1000)
    }
  }
  handleReset(e) {
    this.setState({ ...initialState })
  }
  render() {
    let className = "subscription-form"
    if (this.state.subscribed) className += " subscribed"
    if (this.state.loading) className += " loading"
    return (
      <form
        className={className}
        onSubmit={this.handleSubmit}
      >
        <div className="subscription-callout">
          Subscribe to e-flux and get notified when the next episode is available.
        </div>
        <div className="subscription-row">
          <input
            type="email"
            name="email"
            value={this.state.email}
            placeholder={isHandheld ? "Email address" : "Email address here"}
            autoCorrect="off"
            autoCapitalize="off"
            spellCheck="false"
            onKeyDown={this.handleKeyDown}
            onChange={this.handleChange}
          />
          <button className="subscription-submit" onClick={this.handleSubmit}>
            {'Submit '}
            <Arrow type='right' />
          </button>
        </div>
        <label className="subscription-privacy checkbox">
          <input
            type="checkbox"
            checked={this.state.agreed}
            onChange={this.handleCheckbox}
          />
          <span>
            {"I have read e-flux’s privacy policy "}
            {"and agree that e-flux may send me announcements to the email address "}
            {"entered above and that my data will be processed for this "}
            {"purpose in accordance with e-flux’s "}
            <a href="https://www.e-flux.com/privacy" target="_blank">privacy policy.</a>
          </span>
        </label>
        <div className="subscription-loading">
          <Loader />
        </div>
        <div className="subscription-thanks">
          {this.state.success ? (
            "Thanks! You will receive an email soon confirming your subscription."
          ) : (
            "Sorry, there was a problem adding your subscription."
          )}
          <br />
          <button className="subscription-reset" onClick={this.handleReset}>OK</button>
        </div>
      </form>
    )
  }
}