import React from 'react'

//----------------------------------------------//

const initialState = {
  password: '',
  hash: '',
}

class RetrieveStoryForm extends React.Component {
  constructor() {
    super()
    this.state = initialState
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }

  handleSubmit(e) {
    e.preventDefault()
    try {
      const encryptedStory = this.props.fetchStory(
        this.state.password,
        this.state.hash
      )
      this.props.navigate('read')
    } catch (e) {
      console.log(e)
    }
  }
  render() {
    return (
      <div className="mt-3 mb-5">
        <h3> Retrieve A Story</h3>
        <p>Enter your secret key and your hash below.</p>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group row">
            <label htmlFor="password" className="col-sm-3 col-form-label">
              Password
            </label>
            <div className="col-sm-7">
              <input
                type="text"
                className="form-control"
                id="password"
                name="password"
                placeholder="Password"
                onChange={this.handleChange}
                value={this.state.password}
              />
            </div>
          </div>
          <div className="form-group row">
            <label htmlFor="hash" className="col-sm-3 col-form-label">
              Hash:
            </label>
            <div className="col-sm-7">
              <input
                type="text"
                className="form-control"
                id="hash"
                name="hash"
                placeholder="Hash"
                onChange={this.handleChange}
                value={this.state.hash}
              />
            </div>
          </div>
          <div className="form-group row">
            <div className="col-sm-3">
              <button className="btn btn-dark " type="submit">
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    )
  }
}

//----------------------------------------------//

export default RetrieveStoryForm