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

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

    return (
        <tr>
            <td>
                <p>
                </p><h3><Link to={{
                    pathname: SCRAPE_RESULTS_PAGE,
                    id: scrape._id
                }}>#{index} {scrape.location}</Link></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')} <a href={scrape.sourceUrl}>{scrape.sourceUrl}</a>
                <p></p>
                <p>
                </p>
            </td>
            <td>
                {scrape.filters.map(element => (
                    element.value && <span key={element.value} className="badge bg-primary m-1">{element.value}</span>
                ))}
            </td>
            <td>
                <ScrappeStatus status={scrape.status} id={scrape._id} handleExecute={handleExecute} />
            </td>
        </tr>
    );
}

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

export default ScrapeRequest;