import { compose } from 'redux';
import { graphql } from 'react-apollo';
import { connect } from 'react-redux';

import { remapSearchFilterFaceted } from '../../lib/config/api-mappings-elastic';
import { getQueryString } from '../../lib/config/api-endpoints-elastic';

import AGGREGATIONS_QUERY from '../graphql/queries/aggregations.graphql';
import LISTINGS_QUERY from '../graphql/queries/listings.graphql';
import LISTING_SEARCH from "../graphql/queries/listings-and-aggregations.graphql"


const mapResultsToProps = ({ data, ownProps }) => {
  if (data.loading) return { isLoading: data.loading };
  
  const { listingAggregations, listingSearch, loading } = data;
  const { facets, total, prices, inspections, auctions } = listingAggregations;
  const { listings } = listingSearch;

  return {
    isLoading: loading,
    facets,
    total,
    prices,
    inspections,
    auctions,
    listings,
  };
};

// Get required state to build query string
const mapStateToProps = state => {
  const { listingsFilter: filter, listingsViewType: viewType, listingsByViewType } = state;
  const { page } = listingsByViewType.list;

  // Search results query
  const listingsSearch = remapSearchFilterFaceted(filter, state, page, viewType);
  const listingsSearchQuery = getQueryString(listingsSearch);

  // Aggregations Query
  const aggregations = remapSearchFilterFaceted(filter, state, page);
  const aggregationsQuery = getQueryString({ aggregations });

  return { listingsSearchQuery, aggregationsQuery };
};

const withBffData = graphql(LISTING_SEARCH, {
  props: mapResultsToProps,
  options: ({ gqlQueryString }) => ({ variables: { query: gqlQueryString } }),
});

const reduxWrapper = connect(mapStateToProps);
export default compose(reduxWrapper, withBffData);