import React from 'react';
import PropTypes from 'prop-types';
import { Select } from 'nhh-styles';
import SelectWrapper from './components';
import connect from './connect';
// import { MY_CASES_SEL, CASE_PATCH_SEL } from '../../constants/dropdownValues';

export class CaseFilterComponent extends React.Component {
  componentWillMount() {
    this.props.loadTypes();
  }

  setShowCaseTypeFilter = e => {
    if(e.id === 'CASES_STUF'){
        this.props.loadFilteredCasesSummary({ showType: e.id });
    } else {
        this.props.getTasksSummary({ selectCasesFilter: e.id });
    }

    this.props.setSelectCasesFilter(e.id);
    this.props.updatePageHeader(e.name);
  };
  setTypeFilter = e => {
    //This one is based on the showcaseType
    //Which is stored here: selectedShowTypeFilter && selectedShowTypeFilter.name
    if(selectedShowTypeFilter && selectedShowTypeFilter.name === 'CASES_STUFF'){
        this.props.getTasksSummary({ caseSubTypeFilter: e.id });
    } else {
        this.props.loadFilteredCasesSummary({ typeFilter: e.id });
    }

    this.props.setCaseSubTypeFilter(e.id);


  };
  render() {
    const selectedCaseTypeFilter = this.props.types.find(
      filter => filter.id === this.props.caseSubTypeFilter
    );
    const selectedShowTypeFilter = this.props.showTypes.find(
      filter => filter.id === this.props.selectCasesFilter
    );

    return (
      <React.Fragment>
        <div className="row">
          <SelectWrapper data-bdd="CasesFilters-ShowFilters">
            <Select
              inline
              isFullWidth
              labelText={this.props.showTypeLabel}
              items={this.props.showTypes}
              itemToString={item => (item ? item.name : '')}
              onChange={e => this.setShowCaseTypeFilter(e)}
              inputValue={selectedShowTypeFilter && selectedShowTypeFilter.name}
            />
          </SelectWrapper>
        </div>

        <div className="row">
          <SelectWrapper data-bdd="CasesFilters-CasesFilters">
            <Select
              inline
              isFullWidth
              labelText={this.props.caseTypesLabel}
              items={this.props.types}
              itemToString={item => (item ? item.name : '')}
              onChange={e => this.setTypeFilter(e)}
              inputValue={selectedCaseTypeFilter && selectedCaseTypeFilter.name}
            />
          </SelectWrapper>
        </div>
      </React.Fragment>
    );
  }
}

CaseFilterComponent.propTypes = {
  caseSubTypeFilter: PropTypes.string.isRequired,
  caseTypesLabel: PropTypes.string.isRequired,
  getTasksSummary: PropTypes.func.isRequired,
  loadFilteredCasesSummary: PropTypes.func.isRequired,
  loadTypes: PropTypes.func.isRequired,
  selectCasesFilter: PropTypes.string.isRequired,
  setCaseSubTypeFilter: PropTypes.func.isRequired,
  setSelectCasesFilter: PropTypes.func.isRequired,
  showTypeLabel: PropTypes.string.isRequired,
  showTypes: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
    })
  ).isRequired,
  types: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
    })
  ).isRequired,
  updatePageHeader: PropTypes.func.isRequired,
};

export default connect(CaseFilterComponent);