import React from 'react';
import { PropTypes as T } from 'prop-types';
import moment from 'moment';

import { formatThousands } from '../../utils/format';
import Card, { CardDetails, FooterActions } from '../../components/card';

export default function LocationCard({
  city,
  country,
  firstUpdated,
  id,
  lastUpdated,
  name,
  onDownloadClick,
  parametersList,
  sources,
  sensorType,
  totalMeasurements,
  mobile,
}) {
  let updated = moment(lastUpdated).fromNow();
  let started = moment(firstUpdated).format('YYYY/MM/DD');
  let ended = moment(lastUpdated).format('YYYY/MM/DD');

  return (
    <Card
      id="location"
      title={
        <>
          {name}{' '}
          <small>
            in {city}, {country}
          </small>
        </>
      }
      subtitle={
        <>
          Updated <strong>{updated}</strong>
        </>
      }
      tags={[sensorType, mobile ? 'Mobile' : 'Stationary']}
      renderBody={() => (
        <CardDetails
          id="location"
          list={[
            { label: 'Collection dates', value: `${started} - ${ended}` },

            {
              label: 'Measurements',
              value: formatThousands(totalMeasurements),
            },
            {
              label: 'Parameters',
              value: parametersList
                .map(p => p.displayName || p.parameter)
                .join(', '),
            },
            {
              label: sources.length > 1 ? 'Sources' : 'Source',
              value: sources.map(source => (
                <a
                  href={source.sourceURL}
                  title={`View source for ${name}`}
                  key={source.name}
                >
                  {source.name}
                </a>
              )),
            },
          ]}
        />
      )}
      renderFooter={() => (
        <FooterActions
          what={name}
          onDownloadClick={onDownloadClick}
          viewMorePath={`/location/${encodeURIComponent(id)}`}
        />
      )}
    />
  );
}

LocationCard.propTypes = {
  city: T.string.isRequired,
  country: T.string.isRequired,
  firstUpdated: T.string.isRequired,
  id: T.number.isRequired,
  lastUpdated: T.string.isRequired,
  name: T.string.isRequired,
  onDownloadClick: T.func.isRequired,
  parametersList: T.array.isRequired,
  sources: T.arrayOf(
    T.shape({
      name: T.string.isRequired,
      sourceURL: T.string.isRequired,
      sensorType: T.string.isRequired,
    })
  ).isRequired,
  sensorType: T.string.isRequired,
  totalMeasurements: T.number.isRequired,
  mobile: T.bool.isRequired,
};

@@ -1503,22 +1503,27 @@
 ces.map(
+(
 source
+, i)
  =%3E (%0A  
@@ -1705,16 +1705,39 @@
         
+%7B%60$%7Bi %3E 0 ? ', ' : ''%7D$
 %7Bsource.
@@ -1733,32 +1733,34 @@
 '%7D$%7Bsource.name%7D
+%60%7D
 %0A               

add source seperator