import React  from 'react';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import {database, } from '../firebase/firebase';
import Image from 'react-image-resizer';
import{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";
import { orderBy } from "lodash";


function addToCollection({hit}) {
  console.log('-----');
  console.log('The selected item is:', hit);
  console.log('------');
}

const Hit = ({hit}) =>
  <div className="hit">
    <div className="hit-image">
      <img src={hit.avatarURL} height={150} width={150}/>
    </div>
    <div className="hit-content">
      <div className="hit-marque">
        {hit.marque}
      </div>
      <div className="hit-numero">
        {hit.numero}
      </div>
      <div className="hit-marquesuite">
        {hit.marquesuite}
      </div>
      <div className="hit-reference">
        {hit.reference}
      </div>
      <div className="hit-cote">
        {hit.cote}
      </div>
      <button className="btn btn-success" onClick={addToCollection}>Ajouter à ma collection</button>
    </div>
  </div>

const Content = () =>
  <div className="content container-fluid text-center">
    <div className="row">
      <div className="col-lg">
        <Hits hitComponent={Hit} key ={Hit}/>
      </div>
    </div>
  </div>

class Catalogue extends React.Component {
  constructor(){
    super();
    this.state = {
      catalogue: {},
    };


  }

  render(){

    if(this.state.catalogue === null) {
      return  <p>Le catalogue est vide</p>

    }

      return (
        <div class="container-fluid">
          <h1 className="text-center">Catalogue de capsule</h1>
          <h4 className="text-center">Rechercher une capsule</h4>
          <InstantSearch
            apiKey="a8de2c61b98e1ca62a5df03f1970f46a"
            appId="7H3CTF406R"
            indexName="catalogue">


            <SearchBox translation={{placeholder:'Rechercher une capsule'}} width="500 px"/>



            <Content />


          </InstantSearch>

        </div>
      );
  }
}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Catalogue);