import React, { Component } from 'react';
import { Select } from 'components/Select';
import { IFiltersProps, IFilters } from './type';
// import { FiltersContainer } from './FiltersContainer';

import { clear, active } from 'data/filters';

import { connect } from 'react-redux';
import { RootState } from 'store';
import { selectors } from 'data/filters';

import './Filters.scss';

// type Props = IFiltersProps;

class FiltersComponent extends Component<IFiltersProps> {
  render() {
    const filters =
      this.props.data &&
      this.props.data.map((item: IFilters, i: number) => {
        return (
          <div className="Filters__content--single" key={i}>
            <label className=" Filters__content--label" htmlFor={`filter${i}`}>
              {item.placeholder}
            </label>
            <Select
              id={i.toString()}
              selectPlaceholder={item.placeholder}
              selectData={item.values}
              // selectActive={this.props.setActive}
            />
          </div>
        );
      });

    return (
      <div className="Filters">
        <h3 className="Filters__title">
          Filters
          <span className="Filters__divider" />
          {/* <a onClick={this.props.clearFilters} className="Filters__clear">
            Clear filters
          </a> */}
        </h3>
        <div className="Filters__content">{filters}</div>
      </div>
    );
  }
}

// export const Filters = FiltersContainer(FiltersComponent);
const mapDispatchToProps = { clear, active };

const mapStateToProps = (state: RootState) => {
  const { data } = selectors(state);
  return {
    data,
  };
};

export const Filters = connect(
  mapStateToProps,
  mapDispatchToProps,
)(FiltersComponent);