import { colors, typography } from '../../themes/common-variables'
import { donatePath } from '../../constants/index'
import { screen } from '../../themes/screen'
import React, { PureComponent } from 'react'
import styled from 'styled-components'

const TITLE = '用行動支持報導者'
const TEXT = '優質深度報導必須投入優秀記者、足夠時間與大量資源⋯⋯我們需要細水長流的小額贊助，才能走更長遠的路。 竭誠歡迎認同《報導者》理念的朋友贊助支持我們！ '
const DONATEBUTTONTEXT = '贊助我們'

const Container = styled.div`
  margin: 60px auto 40px auto;
  padding: 40px 30px 30px 30px;
  width: 502px;
  min-height: 284px;
  background: ${colors.white};
  border-left: solid 1px ${colors.secondaryColor};
  ${screen.mobile`
    margin: 40px auto;
    width: 320px;
    min-height: 335px;
  `}
`

const Title = styled.p`
  display: inline-block;
  background: #c9af8e;
  padding-right: 2px;
  box-shadow: 5px 15px 0 ${colors.white} inset;
  font-size: ${typography.font.size.larger};
  font-weight: ${typography.font.weight.bold};
  color: ${colors.black};
  margin-bottom: 15px;
  ${screen.mobile`
    margin-bottom: 18px;
  `}
`

const Text = styled.p`
  font-size: ${typography.font.size.medium};
  line-height: 1.75;
  color: ${colors.black};  
`

const Donate = styled.div`
  width: 100%;
  height: 55px;
  margin-top: 50px;
  ${screen.mobile`
    margin-top: 40px;
  `}
`

const DonateButton = styled.a`
  width: 140px;
  height: 55px;
  background: ${colors.black};
  display: table;
  float: right;
  cursor: pointer;
  p{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: ${typography.font.size.xSmall};
    color: ${colors.white};
    font-weight: 500;
    letter-spacing: 1.3px;
  }
  &:hover{
    background: ${colors.secondaryColor};
  }
`

export default class DonationBox extends PureComponent {
  render() {
    return (
      <Container>
        <Title>
          {TITLE}
        </Title>
        <Text>
          {TEXT}
        </Text>
        <Donate>
          <DonateButton
            href={donatePath}
            target={'_target'}
          >
            <p>{DONATEBUTTONTEXT}</p>
          </DonateButton>
        </Donate>
      </Container>
    )
  }
}

@@ -201,16 +201,47 @@
 'react'%0A
+import ReactGA from 'react-ga'%0A
 import s
@@ -1306,44 +1306,17 @@
  %60%7D%0A
-%60%0A%0Aconst DonateButton = styled.a%60%0A
+  a%7B%0A 
   
+ 
 widt
@@ -1323,24 +1323,26 @@
 h: 140px;%0A  
+ 
+ 
 height: 55px
@@ -1341,24 +1341,26 @@
 ht: 55px;%0A  
+ 
+ 
 background: 
@@ -1376,16 +1376,18 @@
 black%7D;%0A
+  
   displa
@@ -1396,16 +1396,18 @@
  table;%0A
+  
   float:
@@ -1414,16 +1414,18 @@
  right;%0A
+  
   cursor
@@ -1435,16 +1435,18 @@
 ointer;%0A
+  
   p%7B%0A   
@@ -1442,24 +1442,26 @@
 %0A    p%7B%0A    
+  
 display: tab
@@ -1473,16 +1473,18 @@
 ll;%0A    
+  
 text-ali
@@ -1499,16 +1499,18 @@
 er;%0A    
+ 
+ 
 vertical
@@ -1521,24 +1521,26 @@
 gn: middle;%0A
+  
     font-siz
@@ -1578,16 +1578,18 @@
 l%7D;%0A    
+ 
+ 
 color: $
@@ -1604,24 +1604,26 @@
 white%7D;%0A    
+  
 font-weight:
@@ -1628,16 +1628,18 @@
 t: 500;%0A
+  
     lett
@@ -1659,18 +1659,22 @@
 .3px;%0A  
-%7D%0A
+  %7D%0A  
   &:hove
@@ -1676,24 +1676,26 @@
 :hover%7B%0A    
+  
 background: 
@@ -1720,16 +1720,22 @@
 Color%7D;%0A
+    %7D%0A
   %7D%0A%60%0A%0Ae
@@ -1961,28 +1961,91 @@
        %3C
-DonateButton
+ReactGA.OutboundLink%0A            eventLabel=%22article_donation_button_click%22
 %0A       
@@ -2053,12 +2053,10 @@
     
-href
+to
 =%7Bdo
@@ -2088,30 +2088,16 @@
 get=
-%7B'_target'%7D%0A          
+%22_blank%22
 %3E%0A  
@@ -2148,20 +2148,28 @@
   %3C/
-DonateButton
+ReactGA.OutboundLink
 %3E%0A  

Add ga event to donation button in article pages