import React from "react"

import { Element } from "react-scroll"
import AllAlerts from "../../AllAlerts/index.js"
import Selector from "../../Selector/index.js"

class Objectives extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedAlerts: [],
      selectedFYIs: [],
      currentOverview: "",
      filteredObjs: [],
    }

    this.handleObjectiveChange = this.handleObjectiveChange.bind(this)
  }

  handleObjectiveChange(e) {
    let objectives = this.props.objectives.objectives
    this.setState({
      selectedAlerts: [...objectives[e.target.value].alerts],
      currentObjective: e.target.value,
    })
    e.stopPropagation()
  }

  render() {
    return (
      <div>
        <Element id={"Selector-title"} />
        <Selector
          handleObjectiveChange={this.handleObjectiveChange}
          objectives={this.props.objectives.objectives}
          currentObjective={this.state.currentObjective}
        />
        <Element id={"Alerts-title"} />
        <AllAlerts
          objectives={this.props.objectives.objectives}
          alerts={this.props.objectives.alerts}
          fyis={this.props.objectives.fyis}
          selectedAlerts={this.state.selectedAlerts}
        />
      </div>
    )
  }
}

export default Objectives