import React from 'react'
import PropTypes from 'prop-types'
import { translate } from 'react-i18next'
import { get } from 'lodash'

import WarningIcon from 'react-icons/lib/fa/exclamation-triangle'

import { isObsolete } from '../lib/catalog'

import Link from './link'
import HarvestStatus from './harvest-status'
import Counter from './counter'
import Percent from './percent'

export const CatalogPreview = ({ catalog, t }) => {
  let metrics = catalog.metrics
  let openness = get(metrics, 'datasets.partitions.openness.yes', 0)
  let download = get(metrics, 'datasets.partitions.download.yes', 0)

  return (
    <Link href={`/catalog?cid=${catalog._id}`} as={`/catalogs/${catalog._id}`}>
      <a>
        {isObsolete(catalog) && (
          <span className='obsolete' title={t('catalog.obsolete')}>
            <WarningIcon />
          </span>
        )}

        <div className='title'>
          <span title={catalog.name}>
            {catalog.name}
          </span>
        </div>
        <HarvestStatus harvest={catalog.service.sync} />

        <div className='metrics'>
          {!metrics ? <div>{t('catalog.empty')}</div> : (
            <div>
              <Percent
                value={openness}
                total={metrics.datasets.totalCount}
                size='small'
                label={t('catalog.openData')} />

              <Percent
                value={download}
                total={metrics.datasets.totalCount}
                size='small'
                label={t('catalog.downloadable')} />

              <Counter
                value={metrics.records.totalCount}
                size='small'
                label={t('catalog.records')} />
            </div>
          )}
        </div>

        <style jsx>{`
          @import 'colors';

          a {
            display: block;
            padding: 16px 22px;
            text-align: left;
            position: relative;
            color: $darkgrey;
            border-radius: 5px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
            background: $white;
            background: linear-gradient(180deg, #fdfdf8, $white);

            &:hover {
              color: inherit;
              box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.4);
            }
          }

          .obsolete {
            position: absolute;
            color: $yellow;
            right: 12px;
            top: 9px;
            font-size: 2em;
          }

          .title {
            font-size: 1.4em;
            line-height: 1.2em;
            padding-right: 1em;

            @media (min-width: 552px) {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .metrics > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 3em;
            font-size: 11px;

            > div {
              margin: 0 0.5em;

              &:first-child {
                margin-left: 0;
              }

              &:last-child {
                margin-right: 0;
              }
            }
          }
        `}</style>
      </a>
    </Link>
  )
}

CatalogPreview.propTypes = {
  catalog: PropTypes.shape({
    metrics: PropTypes.shape({
      datasets: PropTypes.shape({
        totalCount: PropTypes.number.isRequired
      }).isRequired,

      records: PropTypes.shape({
        totalCount: PropTypes.number.isRequired
      }).isRequired
    }),

    service: PropTypes.shape({
      sync: PropTypes.object.isRequired
    }).isRequired
  }),

  t: PropTypes.func.isRequired
}

export default translate()(CatalogPreview)

@@ -2010,18 +2010,17 @@
 ow: 
-2px 2px 10
+1px 1px 3
 px r
@@ -2038,13 +2038,13 @@
 , 0.
-15
+2
 );%0A
+%0A
     
@@ -2220,18 +2220,17 @@
 ow: 
-3px 3px 15
+1px 1px 6
 px r

Fix catalog preview box-shadow