import React from 'react';
import PropTypes from 'prop-types';
import Text from '@bufferapp/components/Text';
import getSymbolFromCurrency from 'currency-symbol-map';

import TruncatedNumber  from '../../TruncatedNumber';
import ReferralIcon from '../../ReferralIcon';
import * as styles from './styles';
import Metrics from './Metrics';

const knownSources = [
  'Buffer',
  'Facebook',
  'Google',
  'Instagram',
  'LinkedIn',
  'Pinterest',
  'Shopify',
  'Twitter',
  'Youtube',
];

function getSource(source) {
  let match = null;
  knownSources.forEach((key) => {
    if (source.toLowerCase().match(key.toLowerCase())) {
      match = key;
    }
  });
  return match || source;
}

function formatPrice({ max_price, min_price, currency }) {
  if (max_price === min_price) {
    return `${getSymbolFromCurrency(currency || 'usd')}${min_price}`;
  }

  return `${getSymbolFromCurrency(currency || 'usd')}${min_price} - ${getSymbolFromCurrency(currency)}${max_price}`;
}

class ProductReferrals extends React.Component {
  render () {
    const item = this.props.item;
    const dummies = [];
    const referrals = item.referrals.slice(0,3);

    for (let i=0; i < (3 - referrals.length); i++) {
      dummies.push((
        <li>
          <styles.ProductReferralNameHolder>
            <Text size="mini" color="shuttleGray">&nbsp;</Text>
          </styles.ProductReferralNameHolder>
          <Text size="mini" color="shuttleGray">
            <TruncatedNumber>-</TruncatedNumber>
          </Text>
        </li>
      ));
    }

    return (
      <styles.ProductReferralsStyled>
        <Text size="mini" color="shuttleGray">Top Referrals</Text>
        <styles.ProductReferralsContainer>
          {referrals.map(referral => (
            <li>
              <styles.ProductReferralNameHolder>
                <ReferralIcon item={referral} size="small" />
                <Text size="mini" color="shuttleGray">
                  {getSource(referral.source)}
                </Text>
              </styles.ProductReferralNameHolder>
              <Text size="mini" color="shuttleGray">
                {`${getSymbolFromCurrency(item.currency || 'usd')}`}
                <TruncatedNumber>{referral.sales}</TruncatedNumber>
              </Text>
            </li>
          ))}
          {dummies}
        </styles.ProductReferralsContainer>
      </styles.ProductReferralsStyled>
    );
  }
};

ProductReferrals.defaultProps = {
  item: {},
};

ProductReferrals.propTypes = {
  item: PropTypes.shape({}),
};

const Product = ({ item, number, forReport }) => (
  <styles.ItemContainer forReport={forReport} big>
    <styles.HorizontalContainer>
      <Text size="large" weight="bold" color="outerSpace">
        {number}
      </Text>
      <styles.ProductImage {...item} />
      <styles.VerticalContainer height="178px">
        <styles.ProductName>
          <Text size="mini" color="shuttleGray">Product</Text>
          <br />
          <Text size="large" weight="bold" color="outerSpace">
            <styles.ProductTruncate title={item.title}>{item.title}</styles.ProductTruncate>
          </Text>
        </styles.ProductName>
        <styles.ProductMeta>
          <styles.ProductMetaLabel>Price</styles.ProductMetaLabel>
          <styles.ProductMetaValue>{formatPrice(item)}</styles.ProductMetaValue>
        </styles.ProductMeta>
        <styles.ProductMeta>
          <styles.ProductMetaLabel>Variants</styles.ProductMetaLabel>
          <styles.ProductMetaValue>{item.variants}</styles.ProductMetaValue>
        </styles.ProductMeta>
      </styles.VerticalContainer>
    </styles.HorizontalContainer>

    <styles.HorizontalContainer>
      <styles.VerticalContainer height="178px">
        <Metrics metrics={item.metrics} />
        <ProductReferrals item={item} />
      </styles.VerticalContainer>
    </styles.HorizontalContainer>
  </styles.ItemContainer>
);

Product.defaultProps = {
  item: {},
  number: null,
};

Product.propTypes = {
  item: PropTypes.shape({}),
  number: PropTypes.number,
};

export default Product;