import React from 'react'
import R from 'ramda'

import TrendLine from 'components/TrendLine'
import { CommunityHolder } from 'components/LoadingEffects'
import { ISSUE_ADDR } from 'config'

import { NON_FILL_COMMUNITY, prettyNum, cutFrom } from 'utils'
import SubscribeBtn from './SubscribeBtn'

import {
  Wrapper,
  CardsWrapper,
  Card,
  EmptyCard,
  EmptyTitle,
  EmptyDesc,
  IssueLink,
  SearchValueFocus,
  CommunityIcon,
  CardTitle,
  CardDesc,
  ActivitySpark,
  Divider,
  CardFooter,
} from './styles/community_cards'

const CommunityCard = ({ community, restProps }) => (
  <Card>
    <CommunityIcon
      nonFill={R.contains(community.raw, NON_FILL_COMMUNITY)}
      src={community.logo}
      loading={<CommunityHolder text={community.raw} place="communities" />}
    />
    <CardTitle>{community.title}</CardTitle>
    <CardDesc>{community.desc}</CardDesc>
    <ActivitySpark>
      <TrendLine data={community.contributesDigest} />
    </ActivitySpark>
    <Divider />
    <CardFooter>
      <React.Fragment>
        {/* TODO: number color should be different when number grow large */}
        {prettyNum(community.subscribersCount)}{' '}
        {community.subscribersCount < 1000 ? '人关注' : '关注'}
      </React.Fragment>

      <SubscribeBtn community={community} restProps={restProps} />
    </CardFooter>
  </Card>
)

const CommnityCards = ({ entries, restProps }) => {
  if (R.isEmpty(entries)) {
    const { searchValue } = restProps

    return (
      <CardsWrapper>
        <EmptyCard>
          <EmptyTitle>
            没有找到包含{' '}
            <SearchValueFocus>{cutFrom(searchValue, 10)}</SearchValueFocus>{' '}
            的社区
          </EmptyTitle>
          <EmptyDesc>
            若没有你感兴趣的社区, 你可以
            <IssueLink
              href={`${ISSUE_ADDR}/280`}
              rel="noopener noreferrer"
              target="_blank"
            >
              参与创建
            </IssueLink>
          </EmptyDesc>
        </EmptyCard>
      </CardsWrapper>
    )
  }
  return (
    <Wrapper>
      <CardsWrapper>
        {entries.map(community => (
          <CommunityCard
            key={community.raw}
            community={community}
            restProps={restProps}
          />
        ))}
      </CardsWrapper>
    </Wrapper>
  )
}

export default CommnityCards

@@ -585,24 +585,132 @@
  (%0A  %3CCard%3E%0A
+    %3Ca%0A      href=%7B%60/$%7Bcommunity.raw%7D/posts%60%7D%0A      rel=%22noopener noreferrer%22%0A      target=%22_blank%22%0A    %3E%0A  
     %3CCommuni
@@ -716,16 +716,18 @@
 ityIcon%0A
+  
       no
@@ -786,16 +786,18 @@
 %7D%0A      
+  
 src=%7Bcom
@@ -809,16 +809,18 @@
 y.logo%7D%0A
+  
       lo
@@ -888,25 +888,36 @@
 es%22 /%3E%7D%0A    
-/
+  /%3E%0A    %3C/a
 %3E%0A    %3CCardT

add linker to community logo