import React, { useEffect, useState } from 'react';
import { getByIdScrappe } from '../../request/scrappe';
import { Link } from "react-router-dom";

import ScrappeDetails from '../../components/ScrappeDetails/ScrappeDetails'
import ScrappeResult from '../../components/ScrappeResult/ScrappeResult'
import PropTypes from 'prop-types';

const ScrapeResultsPage = ({ location }) => {

  const [scrappeResults, setScrappeResults] = useState()
  const [scrappeDetails, setScrappeDetails] = useState()
  
  useEffect(() => {
    getByIdScrappe(location.id)
    .then(res => {
        setScrappeDetails(res.data)
   
    if(res.data.status==='done')
    setScrappeResults(res.data.result)})
  }, [setScrappeResults])
  console.log("scrappeDetails", scrappeDetails)
  
 
  return (
    <>
        
      <nav className="main-header navbar navbar-expand-md navbar-light navbar-white">
        <div className="container">
          
          <Link to="/" className="navbar-brand">          
            <span className="brand-text font-weight-light">Back to Scrape</span>
          </Link> 
        </div>
      </nav>    
       <ScrappeDetails details = {scrappeDetails} />
        <div className ='content' >
            <div className="container">
              <div className="row">
                {(scrappeResults !== undefined) ?
                            scrappeResults.map((result, i) => <ScrappeResult key={i} index={i} type={scrappeDetails.filters.find(el => el.name=="type" && el.value !== null)} result = {result} />) 
                            :''
                }
              </div>
            </div>
        </div>
     </> 
  );
};

ScrapeResultsPage.propTypes = {
  location: PropTypes.object
};

export default ScrapeResultsPage;