<commit_before>import React, { Component, PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import styled from 'styled-components';
import Dialog from 'material-ui/Dialog';
import AddIcon from 'material-ui/svg-icons/content/add-circle-outline';

import FilterDialog from './FilterDialog';

const Wrapper = styled.div`
  display: flex;
  height: 71px;
`;

const Button = styled.div`
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  &>p {
    font-size: 20px;
    line-height: 32px;
    font-family: LeroyMerlinSans Light;
    margin-left: 12px;
    color: #fff;
  }
`;

const ActiveFilters = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #e4e4e4;
  padding: 0 20px;
  width: 890px;
  &>p {
    font-family: LeroyMerlinSans Italic;
    font-size: 16px;
  }
`;

export default class FilterBar extends Component {
  static propTypes = {
    filterGroups: ImmutablePropTypes.list.isRequired,
    resetFilters: PropTypes.func.isRequired,
    applyFilters: PropTypes.func.isRequired,
    activeFilters: ImmutablePropTypes.list.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  handleOpen = () => {
    this.setState({ open: true });
  }

  handleClose = () => {
    this.setState({ open: false });
  }

  // TODO separate dialog logic into dialog component?
  render() {
    const { resetFilters, activeFilters, applyFilters, productsByAids } = this.props;

    return (
      <Wrapper>
        <Button onClick={this.handleOpen}>
          <AddIcon color="#fff" style={{ height: 30, width: 30 }} />
          <p>Piú filtri</p>
        </Button>
        <ActiveFilters>
          <p>Tocca per avviare una ricerca avanzata dei prodotti</p>
        </ActiveFilters>
        <Dialog
          modal={false}
          onRequestClose={this.handleClose}
          open={this.state.open}
          contentStyle={{ width: '100%', maxWidth: 'none' }}
          bodyStyle={{ padding: '40px', background: 'rgba(51, 51, 51, 0.8)' }}
        ><commit_msg>display active filters<commit_after>import React, { Component, PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { List } from 'immutable';
import styled from 'styled-components';
import Dialog from 'material-ui/Dialog';
import AddIcon from 'material-ui/svg-icons/content/add-circle-outline';

import FilterDialog from './FilterDialog';

const Wrapper = styled.div`
  display: flex;
  height: 71px;
`;

const Button = styled.div`
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  &>p {
    font-size: 20px;
    line-height: 32px;
    font-family: LeroyMerlinSans Light;
    margin-left: 12px;
    color: #fff;
  }
`;

const ActiveFilters = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: ${props => props.bgColor};
  padding: 0 20px;
  width: 890px;
  &>p {
    font-family: LeroyMerlinSans Italic;
    font-size: 16px;
  }
  &>div {
    margin-right: 10px;
  }
`;

const Filter = styled.div`
  width: 150px;
  height: 42px;
  border-radius: 20px;
  background-color: #67cb33;
  color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &>p {
    line-height: 20px;
    font-size: 16px;
    text-align: center;
  }
`;

export default class FilterBar extends Component {
  static propTypes = {
    filterGroups: ImmutablePropTypes.list.isRequired,
    resetFilters: PropTypes.func.isRequired,
    applyFilters: PropTypes.func.isRequired,
    activeFilters: ImmutablePropTypes.list.isRequired,
    productsByAids: ImmutablePropTypes.list.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  handleOpen = () => {
    this.setState({ open: true });
  }

  handleClose = () => {
    this.setState({ open: false });
  }

  renderActiveFilters() {
    const { activeFilters, filterGroups } = this.props;
    if (activeFilters.isEmpty()) {
      return (
        <ActiveFilters bgColor="#e4e4e4">
          <p>Tocca per avviare una ricerca avanzata dei prodotti</p>
        </ActiveFilters>
      )
    }
    const activeFilterList = filterGroups.reduce((acc, val) =>
      acc.push(val.get('filters').filter(f => activeFilters.includes(f.get('code'))))
      , List()).filterNot(g => g.isEmpty()).flatten(true).take(3);
    return (
      <ActiveFilters bgColor="rgba(51, 51, 51, 0.8)">
        {
          activeFilterList.map(f => (
            <Filter key={f.get('code')}>
              <p>{f.get('name')}</p>
            </Filter>))
        }
      </ActiveFilters>

  )
  }

  // TODO separate dialog logic into dialog component?
  render() {
    const { resetFilters, activeFilters, applyFilters, productsByAids } = this.props;
    return (
      <Wrapper>
        <Button onClick={this.handleOpen}>
          <AddIcon color="#fff" style={{ height: 30, width: 30 }} />
          <p>Piú filtri</p>
        </Button>
        {this.renderActiveFilters()}
        <Dialog
          modal={false}
          onRequestClose={this.handleClose}
          open={this.state.open}
          contentStyle={{ width: '100%', maxWidth: 'none' }}
          bodyStyle={{ padding: '40px', background: 'rgba(51, 51, 51, 0.8)' }}
        >
{'fraction_non_alphanumeric': 0.1383406432748538, 'fraction_numerical': 0.021929824561403508, 'mean_word_length': 2.9092857142857143, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 46, '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': '6116533', 'n_tokens_mistral': 1884, 'n_tokens_neox': 1819, 'n_words': 408}