/*
 * SonarQube
 * Copyright (C) 2009-2016 SonarSource SA
 * mailto:contact AT sonarsource DOT com
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
import _ from 'underscore';
import React from 'react';
import Select from 'react-select';

import { translate, getLocalizedMetricName, getLocalizedMetricDomain } from '../../../helpers/l10n';

export default function AddConditionForm ({ metrics, onSelect }) {
  function handleChange (option) {
    const metric = option.value;

    // e.target.value = '';
    onSelect(metric);
  }

  const metricsToDisplay = metrics.filter(metric => !metric.hidden);
  const sortedMetrics = _.sortBy(metricsToDisplay, 'domain');
  const options = sortedMetrics.map(metric => {
    return {
      value: metric.key,
      label: getLocalizedMetricName(metric),
      domain: metric.domain
    };
  });

  // use "disabled" property to emulate optgroups
  const optionsWithDomains = [];
  options.forEach((option, index, options) => {
    const previous = index > 0 ? options[index - 1] : null;
    if (!previous || previous.domain !== option.domain) {
      optionsWithDomains.push({
        value: option.domain,
        label: getLocalizedMetricDomain(option.domain),
        disabled: true
      });
    }
    optionsWithDomains.push(option);
  });

  return (
      <div className="big-spacer-top panel bg-muted">
        <Select
            id="quality-gate-new-condition-metric"
            className="text-middle input-large"
            options={optionsWithDomains}
            placeholder={translate('quality_gates.add_condition')}
            onChange={handleChange}/>
      </div>
  );
}