import React, { Component } from "react";
import styled from "styled-components";
import STYLE from "./styling/Variables"
import { translate } from "react-i18next";
import { pure } from "recompose";
import AddressLine from "./AddressLine";
import T from "prop-types";
import Actions from "../Actions";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { ROUTEPLANNER } from "../constants/URLs.js"


const Tags = (tags=[], dispatch) =>
  <TagsWrapper>
    <TagList>
    { tags
        .filter(t => t != "")
        .map( (t,index) => 
          <Tag key={"Tag"+t}><TagLink 
            onClick={ () => {
              dispatch(Actions.showSearchResults());
              dispatch(Actions.setSearchText('#'+t));
              return dispatch(Actions.search());
            }}
          >#{t}</TagLink></Tag>
        )}
    </TagList>
  </TagsWrapper>

class BusinessCard extends Component {

  homepageLink (){
    const { entry } = this.props;
    if(!entry.homepage) return '';
    let shortLink = entry.homepage.replace( /^http(s)*:\/\/(www\.)*|\/$/gi , "")
    if(shortLink.length>30) shortLink = shortLink.split('/')[0] + "/…"
    if(shortLink.length>30) shortLink = t("entryDetails.homepagePlaceholder")
    return shortLink
  }

  render () {
    const { entry, hasImage, dispatch, t } = this.props;

    if (!entry) {
      return(
        <LoadingEntryMessage>
          {t("entryDetails.loadingEntry")}
        </LoadingEntryMessage>
      );
    }
    else {
      const shortHomepage = this.homepageLink()
      const routeUrl = ROUTEPLANNER.link.replace('{lat}',entry.lat).replace('{lng}',entry.lng)

      return (
        <EntryDetailPage hasImage={hasImage}>
          <EntryTitle>{entry.title}</EntryTitle>
          <EntryDescription>{entry.description}</EntryDescription>
          <EntryDetailsOtherData>{[
            (entry.homepage ?
              <div key="hp">
                <FontAwesomeIcon icon="globe-africa" />&nbsp;
                <EntryLink href={entry.homepage} target="_blank">
                  { shortHomepage }
                </EntryLink>
              </div> : null),
            (entry.email ?
              <div key="mail">
                <FontAwesomeIcon icon="envelope" />&nbsp;
                <EntryLink href={ "mailto:" + entry.email}>
                  {entry.email}
                </EntryLink>
              </div>
              : null),
            (entry.telephone
              ?
              <div key="tel">
                <FontAwesomeIcon icon="phone" />&nbsp;{ entry.telephone }
              </div>
              : null),
            ((entry.street || entry.zip || entry.city) ?
              <div>
                <div key="addr" className="address pure-g">
                  <FontAwesomeIcon className="pure-u-2-24" icon="map-marker-alt" />
                  <div className="pure-u-22-24">
                    <AddressLine { ...entry } />
                  </div>
                </div>
                <div key="route">
                  <FontAwesomeIcon icon="route" />&nbsp;
                  <EntryLink title={ "Hinfinden mit "+ROUTEPLANNER.name } href={routeUrl} target="_blank">Routenplaner</EntryLink>
              </div></div>
              : null),
            (entry.tags && entry.tags.filter(t => t !="").length > 0
              ? Tags(entry.tags, dispatch)
              : null)
          ]}</EntryDetailsOtherData>
        </EntryDetailPage>)
    }
  }
}

BusinessCard.propTypes = {
  entry: T.object
}

module.exports = translate('translation')(pure(BusinessCard))



const EntryDetailPage = styled.div`
  z-index: 2;
  position: relative;
  padding: 1px 1em 0 1em;
  max-width: 500px;
  background-color: #fff;
  margin-top: ${props => props.hasImage ? "244px" : "0"};
`;

const LoadingEntryMessage = styled.div`
  padding: 1.5em;
`;

const EntryLink = styled.a`
  color: ${STYLE.darkGray};
  text-decoration: none;
  &:hover {
    text-decoration: underline;
    color: #000;
  }
`;

const EntryTitle = styled.h3`
  color:       ${STYLE.anthracite};
  margin-bottom: -6px;
  margin-top: 20px;
`;

const EntryDescription = styled.p`
  color: ${STYLE.darkGray};
`;

const EntryDetailsOtherData = styled.div`
  font-family: ${STYLE.headerFont};
`;

const TagsWrapper = styled.div `
  margin-top: 1.5em;
`;

const TagList = styled.ul `
  list-style: none;
  padding: 0;
  margin: 0;
`;

const Tag = styled.li `
  display: inline;
`;

const TagLink = styled.a `
  color: #333;
  text-decoration: none;
  display: inline-block;
  background: #eaeaea;
  border-radius: 0.3em;
  padding: .2em .4em;
  font-size: 0.75em;
  margin-bottom: 0.2rem;
  margin-right: 0.4em;
  letter-spacing: 0.06em;
  cursor: pointer;

  &:hover {
    color: #fff;
    background-color: #333;
  }
`
@@ -1927,24 +1927,31 @@
 tAwesomeIcon
+Element
  icon=%22globe
@@ -1960,32 +1960,32 @@
 frica%22 /%3E&nbsp;%0A
-
                 
@@ -2215,24 +2215,31 @@
 tAwesomeIcon
+Element
  icon=%22envel
@@ -2520,24 +2520,31 @@
 tAwesomeIcon
+Element
  icon=%22phone
@@ -2788,16 +2788,23 @@
 someIcon
+Element
  classNa
@@ -3059,16 +3059,23 @@
 someIcon
+Element
  icon=%22r
@@ -3593,16 +3593,96 @@
 Card))%0A%0A
+%0Aconst FontAwesomeIconElement = styled(FontAwesomeIcon)%60%0A  margin-right: 8px;%0A%60;
 %0A%0Aconst 

add space between icons and text