import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getAllScrappes } from '../../request/scrappe';
import ScrapeRequest from '../ScrapeRequest/ScrapeRequest';
import './ScrappeRequests.scss'

// const scrape = { Title: "#1 Chicago, IL", Count: "200", EstimatedTime: "20/7/2021 20:30AM", Url: "https://www.apartments.com/chicago-il/", Filters: [{ id: 1, type: "prices" }, { id: 2, type: "beds" }, { id: 3, type: "type" }, { id: 4, type: "lifestyle" }] };
const ScrapeRequests = () => {
  const [scrappes, setScrappes] = useState([])
  const { t } = useTranslation();

  useEffect(() => {
    getAllScrappes().then(res => setScrappes(res.data))
  }, [setScrappes])

  console.log(scrappes)
  return (
    <div className="card">
      <div className="card-header">
        <h3 className="card-title">{t('scrapeRequests.Title')}</h3>
      </div>
      {scrappes.length === 0 ? <tbody><tr><td><span className='center-align'>Nothing to show</span></td></tr></tbody> :
        <div className="card-body p-0">
          <table className="table table-sm">
            <thead>
              <tr>
                <th className='font-weight-bold'>{t('scrapeRequests.Columns.Scrape')}</th>
                <th>{t('scrapeRequests.Columns.Filters')}</th>
                <th>{t('scrapeRequests.Columns.Status')}</th>
              </tr>
            </thead>
            <tbody>
              {scrappes.map((scrape, i) => <ScrapeRequest index={i + 1} key={scrape.id} scrape={scrape} />)}
            </tbody>
          </table>
        </div>}
    </div>
  );
}

export default ScrapeRequests;