import React, { Component } from 'react';
import {
	ReactiveBase,
	SingleRange,
	SelectedFilters,
	ResultCard,
} from '@appbaseio/reactivesearch';
import PropTypes from 'prop-types';

import initReactivesearch from '@appbaseio/reactivesearch/lib/server';

import Layout from '../components/Layout';

const settings = {
	app: 'good-books-ds',
	credentials: 'nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d',
};

const singleRangeProps = {
	componentId: 'BookSensor',
	dataField: 'average_rating',
	data: [
		{ start: 0, end: 3, label: 'Rating < 3' },
		{ start: 3, end: 4, label: 'Rating 3 to 4' },
		{ start: 4, end: 5, label: 'Rating > 4' },
	],
	defaultSelected: 'Rating 3 to 4',
};

const resultCardProps = {
	componentId: 'SearchResult',
	dataField: 'original_title.raw',
	from: 0,
	size: 10,
	onData: data => ({
		title: <div className="book-title-card text-center" dangerouslySetInnerHTML={{ __html: data.original_title }} />,
		description: (
			<div className="flex column justify-space-between text-center">
				<div>
					<div>by <span className="authors-list">{data.authors}</span></div>
					<div className="ratings-list flex align-center justify-center">
						<span className="stars">
							{
								Array(data.average_rating_rounded).fill('x')
									.map((item, index) => <span key={index}>👽</span>) // eslint-disable-line
							}
						</span>
						<span className="avg-rating">({data.average_rating} avg)</span>
					</div>
				</div>
				<span className="pub-year">Pub {data.original_publication_year}</span>
			</div>
		),
		image: data.image,
	}),
	react: {
		and: ['BookSensor'],
	},
};

export default class Main extends Component {
	static async getInitialProps() {
		return {
			store: await initReactivesearch(
				[
					{
						...singleRangeProps,
						type: 'SingleRange',
						source: SingleRange,
					},
					{
						...resultCardProps,
						type: 'ResultCard',
						source: ResultCard,
					},
				],
				null,
				settings,
			),
		};
	}

	render() {
		return (
			<Layout title="SSR | SingleRange">
				<ReactiveBase {...settings} initialState={this.props.store}>
					<div className="row">
						<div className="col">
							<SingleRange
								{...singleRangeProps}
							/>
						</div>

						<div className="col">
							<SelectedFilters />
							<ResultCard
								{...resultCardProps}
							/>
						</div>
					</div>
				</ReactiveBase>
			</Layout>
		);
	}
}

Main.propTypes = {
	// eslint-disable-next-line
	store: PropTypes.object,
};

@@ -94,24 +94,26 @@
 ers,%0A%09Re
-sultCard
+activeList
 ,%0A%7D from
@@ -293,16 +293,63 @@
 Layout';
+%0Aimport BookCard from '../components/BookCard';
 %0A%0Aconst 
@@ -735,24 +735,26 @@
 const re
-sultCard
+activeList
 Props = 
@@ -862,765 +862,47 @@
 =%3E (
-%7B%0A%09%09title: %3Cdiv className=%22book-title-card text-center%22 dangerouslySetInnerHTML=%7B%7B __html: data.original_title %7D%7D /%3E,%0A%09%09description: (%0A%09%09%09%3Cdiv className=%22flex column justify-space-between text-center%22%3E%0A%09%09%09%09%3Cdiv%3E%0A%09%09%09%09%09%3Cdiv%3Eby %3Cspan className=%22authors-list%22%3E%7Bdata.authors%7D%3C/span%3E%3C/div%3E%0A%09%09%09%09%09%3Cdiv className=%22ratings-list flex align-center justify-center%22%3E%0A%09%09%09%09%09%09%3Cspan className=%22stars%22%3E%0A%09%09%09%09%09%09%09%7B%0A%09%09%09%09%09%09%09%09Array(data.average_rating_rounded).fill('x')%0A%09%09%09%09%09%09%09%09%09.map((item, index) =%3E %3Cspan key=%7Bindex%7D%3E%F0%9F%91%BD%3C/span%3E) // eslint-disable-line%0A%09%09%09%09%09%09%09%7D%0A%09%09%09%09%09%09%3C/span%3E%0A%09%09%09%09%09%09%3Cspan className=%22avg-rating%22%3E(%7Bdata.average_rating%7D avg)%3C/span%3E%0A%09%09%09%09%09%3C/div%3E%0A%09%09%09%09%3C/div%3E%0A%09%09%09%09%3Cspan className=%22pub-year%22%3EPub %7Bdata.original_publication_year%7D%3C/span%3E%0A%09%09%09%3C/div%3E%0A%09%09),%0A%09%09image: data.image,%0A%09%7D
+%3CBookCard key=%7Bdata._id%7D data=%7Bdata%7D /%3E
 ),%0A%09
@@ -1184,32 +1184,34 @@
 %0A%09%09%09%09%09%09...re
-sultCard
+activeList
 Props,%0A%09%09%09%09%09
@@ -1220,24 +1220,26 @@
 ype: 'Re
-sultCard
+activeList
 ',%0A%09%09%09%09%09
@@ -1249,24 +1249,26 @@
 urce: Re
-sultCard
+activeList
 ,%0A%09%09%09%09%09%7D
@@ -1635,24 +1635,26 @@
 %09%09%09%09%09%3CRe
-sultCard
+activeList
 %0A%09%09%09%09%09%09%09
@@ -1664,16 +1664,18 @@
 ..re
-sultCard
+activeList
 Prop

update SingleRange SSR example