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, handleExecute }) => {
    const { t } = useTranslation();

    return (
        <>
            <tr>
                <td>
                    <p>
                    </p><h3><Link to={{
                        pathname: SCRAPE_RESULTS_PAGE.replace(':id', scrape._id),
                        id: scrape._id
                    }}
                        target="_blank" rel="noopener noreferrer">{scrape.description || 'No name given'}</Link></h3>
                    <p>
                        {scrape.location && <span className="mr-2">Location: <span className='text-info'>{scrape.location}</span></span>}
                        <a className='mr-1' href={scrape.sourceUrl} target="_blank" rel="noopener noreferrer"><i className="fas fa-external-link-square-alt"></i> https://www.apartments.com</a>
                        {/* <span className="text-lg">Id: {scrape._id}</span> */}
                    </p>
                    <p>
                        <span className="mr-1">Count: <span className='text-info'>{scrape.count}</span></span>
                        {scrape.createDate && <span className="mr-1">Creation time: <span className='text-info'>{(new Date(scrape.createDate)).toLocaleString()}</span></span>}
                        {(scrape.startDate !== undefined && scrape.startDate !== null) ?
                            <span className="mr-1">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="mr-1">{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"><span>{element.name}:</span> <br></br> <span>{element.name === 'baths' ? element.value + '+' : element.value}</span></span>
                    ))}
                </td>
                <td>
                    <ScrappeStatus status={scrape.status} id={scrape._id} handleExecute={handleExecute} />
                </td>
            </tr>
        </>
    );
}

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

export default ScrapeRequest;