import React from 'react'; import { allMetricsList, allRefreshIntervals, allTimeframes } from './Constants';

import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField';

export default function Nav(props: any): JSX.Element {

return (
  <div className={props.state.showNav ? "topbar" : "topbar closed"}>
    <div className="row">
      <div className="col col-md-12">
        <Autocomplete
          multiple
          id="overview_metrics"
          options={allMetricsList}
          getOptionLabel={option => option.label}
          defaultValue={props.state.overviewMetricsList}
          filterSelectedOptions
          onChange={(event, value) => value && props.changeOverviewMetricsList(value)}
          renderInput={params => (
            <TextField
              {...params}
              variant="outlined"
              label="Overview metrics"
              fullWidth
              value={props.state.overviewMetricsList}
            />
          )}
        />

        <br></br>

        <Autocomplete
          multiple
          id="graph_metrics"
          options={allMetricsList}
          getOptionLabel={option => option.label}
          defaultValue={props.state.graphMetricsList}
          filterSelectedOptions
          onChange={(event, value) => value && props.changeGraphMetricsList(value)}
          renderInput={params => (
            <TextField
              {...params}
              variant="outlined"
              label="Graph metrics"
              fullWidth
              value={props.state.graphMetricsList}
            />
          )}
        />

        <br></br>

      </div>

      <div className="col">
        <Autocomplete
          id="refresh"
          options={allRefreshIntervals}
          getOptionLabel={option => option.label}
          onChange={(event: any, value: any) => value && props.changeFrequency(value.value)}
          defaultValue={allRefreshIntervals.find(element => element.value === props.state.frequency)}
          filterSelectedOptions
          renderInput={params => (
            <TextField
              {...params}
              variant="outlined"
              label="Refresh interval"
              fullWidth
            />
          )}
        />
      </div>

      <div className="col">
        <Autocomplete
          id="timeframe"
          options={allTimeframes}
          getOptionLabel={option => option.label}
          onChange={(event: any, value: any) => value && props.changeTimeframe(value.value)}
          defaultValue={allTimeframes.find(element => element.value === props.state.timeframe)}
          filterSelectedOptions
          renderInput={params => (
            <TextField
              {...params}
              variant="outlined"
              label="Timeframe"
              fullWidth
            />
          )}
        />
      </div>

      <div className="col col-md-6">
        <div className="form-group metrics-url">
          <label>Metrics url</label>
          <input type="url" className="form-control" placeholder="Metrics url" value={props.state.metricsUrl} onChange={e => props.changeMetricsUrl(e.target.value)}/>
        </div>
      </div>
    </div>

  </div>
);

}