"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactRouterDom = require("react-router-dom");

var _propertyType = _interopRequireDefault(require("../property-type"));

var _designSystem = require("../design-system");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class FilterContainer extends _react.default.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.resetFilter = this.resetFilter.bind(this);
    this.state = {
      filter: this.parseQuery()
    };
  }

  componentWillReceiveProps(nextProps) {
    const {
      match
    } = this.props;

    if (nextProps.match.params.resourceId !== match.params.resourceId) {
      this.setState({
        filter: {}
      });
    }
  }

  parseQuery() {
    const {
      location
    } = this.props;
    const filter = {};
    const query = new URLSearchParams(location.search);

    for (const entry of query.entries()) {
      const [key, value] = entry;

      if (key.match('filters.')) {
        filter[key.replace('filters.', '')] = value;
      }
    }

    return filter;
  }

  handleSubmit(event) {
    event.preventDefault();
    const {
      filter
    } = this.state;
    const {
      history
    } = this.props;
    const search = new URLSearchParams(window.location.search);
    Object.keys(filter).forEach(key => {
      if (filter[key] !== '') {
        search.set(`filters.${key}`, filter[key]);
      } else {
        search.delete(`filters.${key}`);
      }
    });
    search.set('page', '1');
    history.push(`${history.location.pathname}?${search.toString()}`);
    return false;
  }

  resetFilter(event) {
    const {
      history
    } = this.props;
    event.preventDefault();
    const filteredSearch = new URLSearchParams();
    const search = new URLSearchParams(window.location.search);

    for (const key of search.keys()) {
      if (!key.match('filters.')) {
        filteredSearch.set(key, search.get(key));
      }
    }

    const query = filteredSearch.toString() === '' ? `?${filteredSearch.toString()}` : '';
    history.push(history.location.pathname + query);
    this.setState({
      filter: {}
    });
  }

  handleChange(propertyName, value) {
    if (propertyName.params) {
      throw new Error('you can not pass RecordJSON to filters');
    }

    this.setState(state => ({
      filter: { ...state.filter,
        [propertyName]: value
      }
    }));
  }

  render() {
    const {
      resource,
      isVisible,
      toggleFilter
    } = this.props;
    const {
      filter
    } = this.state;
    const properties = resource.filterProperties;
    return _react.default.createElement(_designSystem.Drawer, {
      variant: "filter",
      isHidden: !isVisible,
      as: "form",
      onSubmit: this.handleSubmit
    }, _react.default.createElement(_designSystem.DrawerContent, null, _react.default.createElement(_designSystem.H3, null, _react.default.createElement(_designSystem.Button, {
      type: "button",
      size: "icon",
      rounded: true,
      mr: "lg",
      onClick: () => toggleFilter()
    }, _react.default.createElement(_designSystem.Icon, {
      icon: "ChevronRight",
      color: "white"
    })), "Filters"), _react.default.createElement(_designSystem.Box, {
      my: "x3"
    }, properties.map(property => _react.default.createElement(_propertyType.default, {
      key: property.name,
      where: "filter",
      onChange: this.handleChange,
      property: property,
      filter: filter,
      resource: resource
    })))), _react.default.createElement(_designSystem.DrawerFooter, null, _react.default.createElement(_designSystem.Button, {
      variant: "primary",
      size: "lg"
    }, "Apply changes"), _react.default.createElement(_designSystem.Button, {
      variant: "text",
      size: "lg",
      onClick: this.resetFilter,
      type: "button"
    }, "Reset filter")));
  }

} // <FilterContent>
//   <FilterLink onClick={toggleFilter}>
//     <span><i className="fas fa-arrow-right" /></span>
//     Filter
//   </FilterLink>
// <form onSubmit={this.handleSubmit.bind(this)}>
//   {properties.map(property => (
//     <PropertyType
//       key={property.name}
//       where={PropertyPlace.filter}
//       onChange={this.handleChange}
//       property={property}
//       filter={filter}
//       resource={resource}
//     />
//   ))}
//   <StyledButton className="is-primary">
//     Apply Changes
//   </StyledButton>
//   <StyledButton
//     as="a"
//     className="is-text"
//     onClick={this.resetFilter}
//   >
//     Clear filters
//   </StyledButton>
// </form>
// </FilterContent>


var _default = (0, _reactRouterDom.withRouter)(FilterContainer);

exports.default = _default;