import React from 'react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import ScrappeStatus from './ScrappeStatus';
import { executeScrappes } from '../../request/scrappe';
import { SCRAPE_RESULTS_PAGE } from '../../constants/pages'
import { Link } from 'react-router-dom';

const ScrapeRequest = ({ scrape, index }) => {
    const { t } = useTranslation();

    console.log("In req", scrape)

    async function handleSubmit(event) {
        event.preventDefault();
        const res = await executeScrappes(scrape._id)
        console.log("Execut", res)
    }
    return (
        <tr>
            <td>
                <p>
                </p><h3>#{index} {scrape.location}</h3>
                <span className="text-muted">Count {scrape.count} +</span>
                <span> | </span>
                <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(scrape.estimate)).toLocaleString()}</span>
                <span> | </span>
                {t('scrapeRequest.ViewScrape')} <Link to={{
                    pathname: SCRAPE_RESULTS_PAGE,
                    id: scrape._id
                }}>{scrape.sourceUrl}</Link>
                <p></p>
                <p>
                </p>
            </td>
            <td>
                {scrape.filters.map(element => (
                    element.value && <span key={element.name} className="badge bg-primary m-1">{element.name}</span>
                ))}
            </td>
            <td>
                <ScrappeStatus status={scrape.status} handleSubmit={handleSubmit} />
            </td>
        </tr>
    );
}

ScrapeRequest.propTypes = {
    scrape: PropTypes.object,
    index: PropTypes.number
};

export default ScrapeRequest;