import React from "react";
import {Button, Input} from "reactstrap";
import {fetchPathKeys, fetchPaths, savePathToDb} from "./helpers/dbHelpers.js";


export default class PathButtons extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      pathKey: "",
      pathKeys: [],
      savePathKey: "-"
    }
    this.savePathToDb = savePathToDb.bind(this)
  }

  componentDidMount(){
    this.getPathKeys()
  }

  getPathKeys = () => {
    fetchPathKeys().then(keys => this.setState({pathKeys: keys}))
  }

  getPath = () => {
    fetchPaths().then(paths => this.props.updateState("path", paths[this.state.pathKey]))
  }

  choosePath = (event) => {
    this.setState({pathKey: event.target.value})
    this.getPath()
  }

  savePath = () => {
    this.savePathToDb().then(res => {
      let pathKeysCopy = this.state.pathKeys.slice();
      pathKeysCopy.push(this.state.savePathKey);
      this.setState({pathKeys: pathKeysCopy});
      this.setState({savePathKey: ""});
    })
  }

  setSavePathKey = (event) => {
    this.setState({savePathKey: event.target.value})
  }

  render() {
    return (
      <div>
        <Input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
        <Button onClick={this.savePath}>save path</Button>

        <Input type="select" name="select" id="savePath" onChange={this.choosePath}>
          {this.state.pathKeys.map((name, idx) =>
            <option value={name} key={idx}>{name}</option>
          )}
        </Input>
      </div>
    )
  }
}