<commit_before>import PropTypes from 'prop-types';
import React, { Component } from 'react';

import { Filter, FilterOption } from '../../services';

import CheckBox from '../../checkBox/CheckBox.jsx';
import PrimaryButton from '../../button/PrimaryButton.jsx';
import SearchBox from '../../searchBox/SearchBox.jsx';

export default class SearchableMultipleSelectFilterForm extends Component {

  constructor(props) {
    super(props);

    this.onCheckBoxClick = this.onCheckBoxClick.bind(this);
    this.onClickAddButton = this.onClickAddButton.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.options = props.filterOption.comparisonParameters.oneOfOptions;

    let selectedOptions;
    if (this.props.comparisonValue === undefined) {
      selectedOptions = (new Array(this.options.length)).fill(false);
    } else {
      selectedOptions = this.options.map(option =>
        Boolean(props.comparisonValue.find(
          element => element.value === option.value)
        )
      );
    }

    this.state = {
      selectedOptions,
      search: '',
    };
  }

  onCheckBoxClick(index) {
    const selectedOptions = this.state.selectedOptions.slice();
    selectedOptions[index] = !selectedOptions[index];
    this.setState({
      selectedOptions,
    });
  }

  onClickAddButton() {
    const selectedOptionNames = this.options.filter(
      (value, index) => this.state.selectedOptions[index]
    );
    const filter = new Filter(
      this.props.filterOption,
      selectedOptionNames
    );
    this.props.onAddFilter(filter);
  }

  onSearch(str) {
    this.setState({
      search: str,
    });
  }

  render() {
    const options = this.options
    .filter(option => (
      option.label.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
    ))
    .map((option, index) => (
      <div className="filterForm--multiSelect__checkbox" key={index}>
        <CheckBox
          checked={this.state.selectedOptions[index]}
          id={index}
          key={index}
          name="option_checkbox"
          onClick={() => this.onCheckBoxClick(index)}
          type="checkbox"
        />
        {option.label}
      </div>
    ));

    return (
      <div className="filterForm filterForm--multiSelect">
        <div className={'filterForm__search'}>
          <SearchBox
            isImmediate={this.props.isImmediate}
            onSearch={this.onSearch}
          />
        </div>
        {options}
        <div className="filterForm__buttons">
          <PrimaryButton
            disabled={this.state.selectedOptions.indexOf(true) === -1}
            onClick={this.onClickAddButton}
          >
            Update Results
          </PrimaryButton>
        </div>
      </div><commit_msg>[SEM-458]: fix index on filtering<commit_after>import PropTypes from 'prop-types';
import React, { Component } from 'react';

import { Filter, FilterOption } from '../../services';

import CheckBox from '../../checkBox/CheckBox.jsx';
import PrimaryButton from '../../button/PrimaryButton.jsx';
import SearchBox from '../../searchBox/SearchBox.jsx';

export default class SearchableMultipleSelectFilterForm extends Component {

  constructor(props) {
    super(props);

    this.onCheckBoxClick = this.onCheckBoxClick.bind(this);
    this.onClickAddButton = this.onClickAddButton.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.options = props.filterOption.comparisonParameters.oneOfOptions;

    let selectedOptions;
    if (this.props.comparisonValue === undefined) {
      selectedOptions = (new Array(this.options.length)).fill(false);
    } else {
      selectedOptions = this.options.map(option =>
        Boolean(props.comparisonValue.find(
          element => element.value === option.value)
        )
      );
    }

    this.state = {
      selectedOptions,
      search: '',
    };
  }

  onCheckBoxClick(index) {
    const selectedOptions = this.state.selectedOptions.slice();
    selectedOptions[index] = !selectedOptions[index];
    this.setState({
      selectedOptions,
    });
  }

  onClickAddButton() {
    const selectedOptionNames = this.options.filter(
      (value, index) => this.state.selectedOptions[index]
    );
    const filter = new Filter(
      this.props.filterOption,
      selectedOptionNames
    );
    this.props.onAddFilter(filter);
  }

  onSearch(str) {
    this.setState({
      search: str,
    });
  }

  render() {
    const options = this.options
    .map((option, index) => ({
      option,
      index,
    }))
    .filter((item) => {
      const label = item.option.label.toLowerCase();
      return label.indexOf(this.state.search.toLowerCase()) > -1;
    })
    .map(item => (
      <div className="filterForm--multiSelect__checkbox" key={item.index}>
        <CheckBox
          checked={this.state.selectedOptions[item.index]}
          id={item.index}
          key={item.index}
          name="option_checkbox"
          onClick={() => this.onCheckBoxClick(item.index)}
          type="checkbox"
        />
        {item.option.label}
      </div>
    ));

    return (
      <div className="filterForm filterForm--multiSelect">
        <div className={'filterForm__search'}>
          <SearchBox
            isImmediate={this.props.isImmediate}
            onSearch={this.onSearch}
          />
        </div>
        {options}
        <div className="filterForm__buttons">
          <PrimaryButton
            disabled={this.state.selectedOptions.indexOf(true) === -1}
            onClick={this.onClickAddButton}
          >
            Update Results
          </PrimaryButton>
        </div>
      </div>
{'fraction_non_alphanumeric': 0.13472148069051432, 'fraction_numerical': 0.0012457732692649937, 'mean_word_length': 2.4885164494103043, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7489302', 'n_tokens_mistral': 1582, 'n_tokens_neox': 1583, 'n_words': 270}