[buildId].jsx

import React, { useState, useEffect, useContext } from 'react'
import styled from 'styled-components'
import copy from "copy-to-clipboard";
import { GlobalContext } from '../../contexts/GlobalContext'
import Loading from "../../components/Loading"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Stat from '../../components/build/Stat'
import SubclassCard from '../../components/build/SubclassCard'
import ItemCard from '../../components/build/ItemCard'
import UpvoteButton from '../../components/build/UpvoteButton';
import BookmarkButton from '../../components/build/BookmarkButton';
import YouTubeEmbed from '../../components/build/YouTubeEmbed';
import activityOptions from '../../utils/activityOptions'
import { Helmet } from 'react-helmet'
import BuildAd from '../../components/ads/BuildAd';
// import AdSense from 'react-adsense';

const Wrapper = styled.div`
  background-color: #14151a !important;

  .build-loading {
    display: flex;
    justify-content: center;
  }

  .items {
    display: flex;
    flex-wrap: wrap;
  }

  .stats {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.05);
    background-color: #1e1f24;
    text-align: left;
    border-radius: 5px;
    padding: 5px;

    img {
      max-width: 45px;
      padding: 0px 5px;
      border-radius: 5px;
      margin-right: 5px;
    }

    span {
      font-size: 1.3rem;
    }

    &:last-child {
      border-right: 0px !important;
    }
  }

  .stat-entry {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
  }

  .share-bar-buttons {
    display: flex;
    justify-content: space-between;

    svg {
      margin-right: 3px;
    }
  }
  .share-bar-buttons-left {
    display: flex;
  }
  .build-info {
    background-color: #1e1f24;
    border-radius: 5px;
    margin: 5px;
    padding-bottom: 10px;
  }
  .share-bar {
    border-bottom: 1px solid #333;
    margin-bottom: 5px;
  }
  .share-bar button,
  .share-bar a {
    color: #eee;
  }
  .share-bar button:hover,
  .share-bar a:hover {
    color: #888;
  }
  .build-info-header {
    padding-top: 2px;
    font-weight: bold;
  }
  .build-info-icons {
    display: flex;
    img {
      max-width: 50px;
    }
  }
  .btn-twitter {
    background-color: inherit !important;
    border-radius: 0 !important;
  }

  @media (max-width: 576px) {
    h1, h2, h3 {
      text-align: center
    }

    .items {
      justify-content: center !important;
    }

    .stats {
      max-width: 287px;
      margin: 0 auto;
    }

    .build-info {
      margin: 5px 30px !important;
    }

    .share-bar-buttons {
      max-width: 287px;
      display: flex;
      flex-direction: column;
      text-align: left;
      align-items: flex-start;
    }

    .share-bar-buttons-left {
      flex-direction: column;
      justify-content: flex-start;
    }

    .share-bar-buttons .btn {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      text-align: left;
    }
  }
`

const COMP_STATE = {
  LOADING: 0,
  DONE: 1,
  ERROR: 2
}

function Build({ buildId }) {
  const { isInitDone } = useContext(GlobalContext)
  const [compState, setCompState] = useState(COMP_STATE.LOADING)
  const [buildData, setBuildData] = useState({})
  const [highlights, setHighlights] = useState([])
  const [twitterLink, setTwitterLink] = useState("")
  const [primaryActivity, setPrimaryActivity] = useState("")
  const [isCopied, setIsCopied] = useState(false)
  const [adsClientId, setAdsClientId] = useState("")

  useEffect(() => {
    if(!isInitDone) {
      return
    }
    async function init() {
      const { ForgeApiService, ForgeClient } = window.services
      setAdsClientId(ForgeClient.config.adsClientId)

      let buildData = await ForgeApiService.fetchBuild(buildId)
      if(buildData.notes) {
        buildData.notes = buildData.notes.replace(/\n/g, "<br/>")
      }
      if(buildData.highlights) {
        setHighlights(buildData.highlights)
      }
      setBuildData(buildData)

      if(buildData.primaryActivity) {
        let activity = activityOptions.find(el => el.value === buildData.primaryActivity)
        if(activity) {
          setPrimaryActivity(activity)
        }
      }

      // setup twitter link
      let tweetText = "Checkout this build I found on @guardianforge!"
      setTwitterLink(`https://twitter.com/intent/tweet?text=${tweetText}&url=${window.location.href}&hashtags=destiny2`)

      setCompState(COMP_STATE.DONE)
    }
    init()
  }, [isInitDone])

  function copyToClipboard() {
    copy(window.location.href)
    setIsCopied(true)
    setTimeout(() => setIsCopied(false), 3000)
  }

  return (
    <Wrapper>
      <Helmet>
        <title>GuardianForge</title>
      </Helmet>
      {compState === COMP_STATE.LOADING && (
        <Loading />
      )}
      {compState === COMP_STATE.DONE && (
        <div id="build">
          {buildData.name ? (
            <h1>{ buildData.name }</h1>
          ) : (
            <h1>Build { buildId }</h1>
          )}
          <div className="row build-info">
            <div className="share-bar col-md-12">
              <div className="btn-group share-bar-buttons">
                <div className="share-bar-buttons-left">
                  <button type="button" className="btn" onClick={copyToClipboard}>
                    {isCopied ? (
                      <span>👍</span>
                    ) : (
                      <FontAwesomeIcon icon="link" />
                    )}
                    Copy Link
                  </button>
                  <a className="btn btn-twitter" href={twitterLink} target="_blank"><FontAwesomeIcon icon={['fab', 'twitter']} /> Share</a>
                  <BookmarkButton buildId={buildId} buildData={buildData} />
                </div>
                <div className="share-bar-buttons-right">
                  <UpvoteButton buildId={buildId} buildData={buildData} />
                </div>
              </div>
            </div>
            <div className="col-md-6 mt-1">
              {buildData.notes && (
                <div>
                  <span className="build-info-header">Notes</span>
                  <div className="build-notes" dangerouslySetInnerHTML={{ __html: buildData.notes }} />
                </div>
              )}
              {(primaryActivity || buildData.inputStyle) && (<div className="build-info-header mt-3">Works Best With</div>)}
              <div className="build-info-icons">
                {primaryActivity && <img src={primaryActivity.iconUrl} />}
                {buildData.inputStyle === '1' && (<img src="/img/input-icons/mnk.png" />)}
                {buildData.inputStyle === '2' && (<img src="/img/input-icons/controller.png" />)}
              </div>
            </div>
            {buildData.videoLink && (
              <div className="col-md-6 mt-1" v-if="buildData.videoLink">
                <div className="build-info-header mt-1">Video Review</div>
                <YouTubeEmbed youtubeUrl={buildData.videoLink} />
              </div>
            )}
          </div>

          <BuildAd />

          <h3>Stats</h3>
          <div className="items stats">
            {buildData.stats && buildData.stats.mobility && (
              <Stat
                className="col-md-2"
                iconUrl={buildData.stats.mobility.icon}
                value={buildData.stats.mobility.value}
                name="mobility"
                highlights={highlights} />
            )}

            {buildData.stats && buildData.stats.resilience && (
              <Stat
                className="col-md-2"
                iconUrl={buildData.stats.resilience.icon}
                value={buildData.stats.resilience.value}
                name="resilience"
                highlights={highlights} />
            )}

            {buildData.stats && buildData.stats.recovery && (
              <Stat
                className="col-md-2"
                iconUrl={buildData.stats.recovery.icon}
                value={buildData.stats.recovery.value}
                name="recovery"
                highlights={highlights} />
            )}

            {buildData.stats && buildData.stats.discipline && (
              <Stat
                className="col-md-2"
                iconUrl={buildData.stats.discipline.icon}
                value={buildData.stats.discipline.value}
                name="discipline"
                highlights={highlights} />
            )}

            {buildData.stats && buildData.stats.intellect && (
              <Stat
                className="col-md-2"
                iconUrl={buildData.stats.intellect.icon}
                value={buildData.stats.intellect.value}
                name="intellect"
                highlights={highlights} />
            )}

            {buildData.stats && buildData.stats.strength && (
              <Stat
                className="col-md-2"
                iconUrl={buildData.stats.strength.icon}
                value={buildData.stats.strength.value}
                name="strength"
                highlights={highlights} />
            )}
          </div>

          <h3>Subclass</h3>
          <div className="items subclass">
            {buildData.items.subclass && (<SubclassCard item={buildData.items.subclass} highlights={highlights}/>)}
          </div>

          <h3>Weapons</h3>
          <div className="items weapons">
            {buildData.items.kinetic && (<ItemCard item={buildData.items.kinetic} highlights={highlights} />)}
            {buildData.items.energy && (<ItemCard item={buildData.items.energy} highlights={highlights}  />)}
            {buildData.items.power && (<ItemCard item={buildData.items.power} highlights={highlights}  />)}
          </div>

          <h3>Armor</h3>
          <div className="items armor">
            {buildData.items.helmet && (<ItemCard item={buildData.items.helmet} highlights={highlights}  />)}
            {buildData.items.arms && (<ItemCard item={buildData.items.arms} highlights={highlights}  />)}
            {buildData.items.chest && (<ItemCard item={buildData.items.chest} highlights={highlights}  />)}
            {buildData.items.legs && (<ItemCard item={buildData.items.legs} highlights={highlights}  />)}
            {buildData.items.classItem && (<ItemCard item={buildData.items.classItem} highlights={highlights}  />)}
          </div>

          <BuildAd />

        </div>
      )}
    </Wrapper>
  )
}

export default Build