const LandmarkRestaurantRows = connect(
    mapStateToProps,
    dispatch => bindActionCreators({
        onRestaurantViewed: addRestaurantToQueuedDagImpressions,
    }, dispatch)
)(
    ({restaurants, onRestaurantViewed}) => restaurants.map(restaurant => (
        <Restaurant {...restaurant} onRestaurantViewed={onRestaurantViewed} />
    ))
);

const LandmarkPagination = connect(
    state => ({
        page: state.currentPage,
    }),
    dispatch => bindActionCreators({
        onChange: (page) => {
            loadPage(page);
            clearCorrelationId();
        }
    }, dispatch)
)(
    ({page, onChange}) => (
        <div>
            <span>{page}</span>
            <button onClick={() => onChange(page + 1)}>
                next
            </button>
        </div>
    )
)

const selectSearchResultsForLandmarkPage = (state, source) => {
    switch(source) {
        case 'main':
            return state.restaurantsNearbyLandmark;
        case 'nearby':
            return state.nearbyResults;
    }
    throw new Error(`unknown source "${source}" provided.`);
}

const DagAnalytics = connect(
    (state, ownProps) => ({
        correlationId: state.dag.correlationId,
        results: selectSearchResultsForLandmarkPage(state, ownProps.source),
        seenRestaurants: state.dag.seenRestaurants,
    }),
    dispatch => bindActionCreators({
        sendListEvent,
        queueImpressionEvent,
    }, dispatch)
)(
    ({name, correlationId, results, seenRestaurants, sendListEvent, sendImpressionEvent}) => {
        useEffect(() => sendListEvent(name, results), [name, results.restaurants]);
        useEffect(() => queueImpressionEvent(name, seenRestaurants), [name, seenRestaurants]);
        return null;
    }
)

const App = () => (
    <StandardPage>
        <LandmarkRestaurantRows />
        <LandmarkPagination />
        <DagAnalytics name={'landmark-page-results'} source={'main'} />
        <DagAnalytics name={'nearby-results'} source={'nearby'} />
    </StandardPage>
)