import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import Typography from '@material-ui/core/Typography'
import LinearProgress from '@material-ui/core/LinearProgress'
import TreeIcon from 'mdi-material-ui/PineTree'
import CountdownClock from 'js/components/Campaign/CountdownClockComponent'
import InviteFriend from 'js/components/Settings/Profile/InviteFriendContainer'
import { abbreviateNumber } from 'js/utils/utils'
import Link from 'js/components/General/Link'
import { treePlantingCampaignHomepageURL } from 'js/navigation/navigation'
import CampaignWrapper from 'js/components/Campaign/CampaignWrapper'

const TreePlantingCampaign = ({ app, user, campaign, onDismiss }) => {
  const {
    recruits: { recruitsWithAtLeastOneTab = {} },
  } = user
  const { time, treesPlantedGoal } = campaign
  const hasCampaignEnded = moment().isAfter(time.end)
  const { currentNumber: numNewUsers } = app.campaign.goal
  const treesPlantedAbbreviated = abbreviateNumber(numNewUsers)
  const treesPlantedGoalAbbreviated = abbreviateNumber(treesPlantedGoal)
  const progress = (100 * numNewUsers) / treesPlantedGoal
  const treesWord = numNewUsers === 1 ? 'tree' : 'trees'

  const ACCENT_COLOR = '#028502'

  // Tree icon style
  const treeStyle = {
    height: 60,
    width: 60,
  }
  const plantedTreeStyle = Object.assign({}, treeStyle, {
    color: ACCENT_COLOR,
  })
  const incompleteTreeStyle = Object.assign({}, treeStyle, {
    color: '#BBB',
  })

  return (
    <CampaignWrapper
      onDismiss={onDismiss}
      customTheme={{ mainColor: ACCENT_COLOR, lightColor: '#94989e' }}
    >
      <Typography
        variant={'h6'}
        style={{
          textAlign: 'center',
          marginTop: 4,
        }}
      >
        {hasCampaignEnded
          ? 'Thanks for planting trees!'
          : 'Recruit a friend, plant a tree'}
      </Typography>
      <div
        style={{
          margin: '14px 10px 14px',
          textAlign: 'left',
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                margin: 8,
              }}
            >
              <div>
                {recruitsWithAtLeastOneTab > 0 ? (
                  <TreeIcon style={plantedTreeStyle} />
                ) : (
                  <TreeIcon style={incompleteTreeStyle} />
                )}
                {recruitsWithAtLeastOneTab > 1 ? (
                  <TreeIcon style={plantedTreeStyle} />
                ) : (
                  <TreeIcon style={incompleteTreeStyle} />
                )}
                {recruitsWithAtLeastOneTab > 2 ? (
                  <TreeIcon style={plantedTreeStyle} />
                ) : (
                  <TreeIcon style={incompleteTreeStyle} />
                )}
              </div>
              <Typography variant={'body2'} gutterBottom>
                {recruitsWithAtLeastOneTab}/3 trees planted
              </Typography>
            </div>
          </div>
          {hasCampaignEnded ? null : (
            <div style={{ margin: 16 }}>
              <InviteFriend
                user={user}
                InputProps={{ style: { fontSize: 14 } }}
                label={'Share this link with a friend'}
                helperText={"and you'll plant a tree when they join!"}
                style={{
                  minWidth: 280,
                }}
              />
            </div>
          )}
          <div style={{ margin: 12 }}>
            {hasCampaignEnded ? (
              <Typography variant={'body2'}>
                Together, we planted {treesPlantedAbbreviated} trees this
                holiday season! Great job, and thank you for spreading the word
                about Tab for a Cause!
              </Typography>
            ) : (
              <Typography variant={'body2'}>
                Now until January 10,{' '}
                <Link
                  to={treePlantingCampaignHomepageURL}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: ACCENT_COLOR }}
                >
                  we're planting a tree
                </Link>{' '}
                for every person who joins Tab for a Cause!
              </Typography>
            )}
          </div>
        </div>
      </div>
      <div
        style={{
          marginTop: 8,
          marginBottom: 8,
          textAlign: 'center',
        }}
      >
        <div
          data-test-id={'trees-planted-progress-bar'}
          style={{
            marginLeft: 10,
            marginRight: 10,
          }}
        >
          {hasCampaignEnded ? null : (
            <span
              style={{
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Typography variant={'caption'}>
                {treesPlantedAbbreviated} {treesWord} planted
              </Typography>
              <Typography variant={'caption'}>
                Goal: {treesPlantedGoalAbbreviated}
              </Typography>
            </span>
          )}
          <LinearProgress
            color={'primary'}
            variant={'determinate'}
            value={progress}
          />
        </div>
        <Typography variant={'caption'}>
          <CountdownClock
            campaignStartDatetime={time.start}
            campaignEndDatetime={time.end}
          />{' '}
          remaining
        </Typography>
      </div>
    </CampaignWrapper>
  )
}

TreePlantingCampaign.propTypes = {
  app: PropTypes.shape({
    campaign: PropTypes.shape({
      goal: PropTypes.shape({
        currentNumber: PropTypes.number.isRequired,
      }),
    }).isRequired,
  }),
  campaign: PropTypes.shape({
    time: PropTypes.shape({
      start: PropTypes.instanceOf(moment).isRequired,
      end: PropTypes.instanceOf(moment).isRequired,
    }),
    treesPlantedGoal: PropTypes.number.isRequired,
  }).isRequired,
  user: PropTypes.shape({
    recruits: PropTypes.shape({
      recruitsWithAtLeastOneTab: PropTypes.number.isRequired,
    }).isRequired,
  }).isRequired,
  onDismiss: PropTypes.func.isRequired,
}

export default TreePlantingCampaign

@@ -4257,18 +4257,17 @@
 January 
-10
+5
 ,%7B' '%7D%0A 

Update date