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>
                  {console.log(scrape)}
                </p><h3><Link to={{
                    pathname: SCRAPE_RESULTS_PAGE.replace(':id', scrape._id),
                    id: scrape._id
                }}>#{index} {scrape.location}</Link></h3>               
                <p>
                    <a className='text-sm mr-3' href={scrape.sourceUrl}><i className="fas fa-external-link-square-alt"></i> https://www.apartments.com</a>
                    <span className="lead mr-2">Count : <span className='text-info'>{scrape.count}</span></span>
                    { (scrape.startDate !== undefined && scrape.startDate !== null) ?
                        <span className="lead mr-2">Time:  <span className="text-info">{(new Date(scrape.startDate)).toLocaleString() } - {(scrape.endDate != undefined && scrape.endDate!==null) ? (new Date(scrape.endDate)).toLocaleString():''}</span> </span>
                        :<span className="lead mr-2">{t('scrapeRequest.EstimatedTime')} <span className='text-info'>{(new Date(scrape.estimate)).toLocaleString()}</span></span>
                    }
                </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;