import React from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";

var values;
let arr = [];
class DropDown extends React.Component {
  constructor() {
    super();
    this.state = {
      options: [],
    };
  }

  componentDidMount() {
    this.fetchOptions();
  }

  fetchOptions() {
    fetch("http://vps.k-world.me.uk:3001/getStreamNames")
      .then((res) => {
        return res.json();
      })
      .then((json) => {
        values = json;

        values.forEach((element) => {
          arr.push(element.streamName);
        });
        this.setState({ options: arr });
      });
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value,
    });
  };

  _onSelect = (e) => {
    /*
      Because we named the inputs to match their
      corresponding values in state, it's
      super easy to update the state
    */
    this.setState({ stream: e.value });
  };

  onChange = (e) => {
    /*
      Because we named the inputs to match their
      corresponding values in state, it's
      super easy to update the state
    */
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <Dropdown
        options={arr}
        onChange={this._onSelect}
        value={arr[0]}
        placeholder="Select an option"
      />
    );
  }
}

export default DropDown;