import { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import entityGetter from 'redux/utilities/entityGetter';
import helpers from 'components/queries/QueryPageWrapper/helpers';
import queryInterface from 'interfaces/query';

class QueryPageWrapper extends Component {
  static propTypes = {
    children: PropTypes.node,
    dispatch: PropTypes.func,
    query: queryInterface,
    queryID: PropTypes.string,
  };

  componentDidMount () {
    const { dispatch, query, queryID } = this.props;
    const { fetchQuery } = helpers;

    if (queryID && !query) {
      fetchQuery(dispatch, queryID);
    }

    return false;
  }

  render () {
    const { children } = this.props;

    if (!children) {
      return false;
    }

    return children;
  }
}

const mapStateToProps = (state, { params }) => {
  const { id: queryID } = params;
  const query = entityGetter(state).get('queries').findBy({ id: queryID });

  return { query, queryID };
};

export default connect(mapStateToProps)(QueryPageWrapper);