{"size": 9487, "ext": "js", "max_stars_repo_path": "src/components/Map.js", "max_stars_repo_name": "WeAreDarkBlue/bees", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Map.js", "max_issues_repo_name": "WeAreDarkBlue/bees", "max_issues_repo_issues_event_min_datetime": "2021-03-30T11:32:48.000Z", "max_issues_repo_issues_event_max_datetime": "2021-04-27T15:19:51.000Z", "max_forks_repo_path": "src/components/Map.js", "max_forks_repo_name": "WeAreDarkBlue/bees", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 14, "max_forks_count": null, "avg_line_length": 23.0827250608, "max_line_length": 143, "alphanum_fraction": 0.6037735849}
import React, { useEffect, useRef, useState } from 'react'
import styled, { keyframes } from 'styled-components'
import moment from 'moment'
import { gsap } from "gsap"
import { useLiveOrdersData } from "../data/useLiveOrdersData"
import WorldMap from './WorldMap'
import { Container } from './Container'
import Accordion from './Accordion'
import OrderMap from './OrderMap'

const Map = ({ map, countries }) => {
  const {
    topTitle,
    realTimeTitle,
    realTimeSubtitle,
    title,
    subtitle,
    mapBoxes
  } = map
  const { feedOrders, activeOrders, totals } = useLiveOrdersData()
  const activeCountries = activeOrders.map(o => o.timestamp ? o.timestamp : '')

  const $map = useRef(null)
  const $orders = useRef(null)

  const renderText = (item, i) => {
    const { text, bold } = item

    return bold ? <H4 key={i}>{text}</H4> : <P key={i}>{text}</P>
  }
  
  const list = mapBoxes.map((item, i) => {
    return (
      <Card key={i}>
        { i > 0 ? item.boxElement.map((el, i) => renderText(el, i)) : '' }
        { i === 0 && (<Accordion title={i === 0 ? item.boxElement[0].text : ''} countries={countries} />)}
        { i === mapBoxes.length - 1 && (<SmallPrint>{item.smallPrint}</SmallPrint>)}
      </Card>
    )
  })

  // Cumulative Counter
  /* const totalsList = totals.map((total, i) => {
    const country = countries.filter(c => c.countryCode === total.code)
    return (
      <TotalCard key={i} active={activeCountries.length > 0 && activeCountries.includes(total.code)}>
        <div>
          <CountryTitle>{country[0] ? country[0].countryName : total.code}</CountryTitle>
          { total.latestOrder > 0 && <OrderTime>{ moment(total.latestOrder).format('MM/DD/YY - hh:mm') }</OrderTime> }
        </div>
        <CountryTotal>${total.amount.toFixed(0)}</CountryTotal>
      </TotalCard>
    )
  }) */

  useEffect(() => {
    // feed card fade in/out
    const cards = gsap.utils.toArray($orders.current.children)
    if (cards.length > 0) {
      const cardHeight = cards[0].offsetHeight
      const cardMargin = 20
      const wrapperHeight = (cardHeight + cardMargin) * ((cards.length > 4) ? 4 : cards.length)
      const tl = gsap.timeline()

      tl.set(cards, { opacity: 1 })
      tl.set(cards[0], { autoAlpha: 0 })
      tl.set(cards, { y: 0 })
      tl.to($orders.current, { height: wrapperHeight })
      tl.to(cards.slice(1), { y: cardHeight + 20 }, '<')
      if (cards.length > 4) {
        tl.to(cards[cards.length - 1], { opacity: 0 }, '<')
      }
      tl.to(cards[0], { autoAlpha: 1 }, '-=0.5')
    }

    return () => {
      if (typeof tl !== 'undefined') tl.kill
    }
  }, [feedOrders])

  // Individual counter
  const totalsList = feedOrders.map((order, i) => {
    const country = countries.filter(c => c.countryCode === order.country)
    return (
      <TotalCard key={[order.timestamp, order.amount].join()} active={activeCountries.length > 0 && activeCountries.includes(order.timestamp)}>
        <div>
          <CountryTitle>{country[0] ? country[0].countryName : order.country}</CountryTitle>
          <OrderTime>{ moment.utc(order.timestamp).format('MM/DD/YY - HH:mm:ss') }</OrderTime>
        </div>
        <CountryTotal>${order.amount.toFixed(0)}</CountryTotal>
      </TotalCard>
    )
  })

  return (
    <>
      <MapContainer id="results">
        <TopTitle>{topTitle}</TopTitle>
        <Title>{title}</Title>
        <Subtitle>
          {subtitle}
        </Subtitle>

        <Content>
          <BoxGrid>{list.map(l => l)}</BoxGrid>
        </Content>
      </MapContainer>

      <MapContainer>
        <RealTimeTitle>{realTimeTitle}</RealTimeTitle>
        { realTimeSubtitle && (<Subtitle>{realTimeSubtitle}</Subtitle>)}

        <MapWrapper ref={$map}>
          <OrderMap parentRef={$map} feedOrders={feedOrders} activeOrders={activeOrders} />
        </MapWrapper>

        <MapContent>
          <Boxes ref={$orders}>{totalsList.map(l => l)}</Boxes>
        </MapContent>
      </MapContainer>
    </>
  )
}



const MapContainer = styled(Container)`
  && {
    position: relative;
    width: 100%;
    padding-bottom: 5rem;

    @media screen and (min-width: 1100px) {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
`

const MapWrapper = styled.div`
  display: none;

  @media screen and (min-width: 1100px) {
    display: block;
    width: 70%;
    padding-top: 47%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    svg {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  }
`

const Content = styled.div`
  width: 100%;
`

const MapContent = styled.div`
  width: 100%;
  position: relative;
  min-height: 7.5rem;

  @media screen and (min-width: 1100px) {
    width: 30%;
    margin-left: auto;
    margin-top: 7.5rem;
    margin-bottom: 8.4375rem;
    min-height: 530px;
  }
`

const TopTitle = styled.span`
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1rem;
  opacity: 0.3;
  text-align: center;
  display: block;
  margin-bottom: 1rem;
`
const Title = styled.h2`
  font-size: 42px;
  line-height: 50px;
  letter-spacing: -0.04em;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;

  @media screen and (min-width: 768px) {
    font-size: 64px;
    line-height: 76px;
  }
`

const Subtitle = styled.p`
  font-size: 0.875rem;
  line-height: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  opacity: 0.5;
  text-align: center;

  @media (min-width: 768px) {
    margin-bottom: 4rem;
  }
`

const RealTimeTitle = styled.h4`
  font-size: 1.25rem;
  line-height: 1.625rem;
  font-family: 'Work Sans';
  font-weight: bold;
  text-align: center;
  margin-bottom: -0.75rem;

  @media screen and (min-width: 950px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
`

const H4 = styled.h4`
  font-size: 28px;
  line-height: 34px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1;
  letter-spacing: -0.03em;

  @media (min-width: 950px) {
    font-size: 36px;
    line-height: 1;
  }
    
`

const P = styled.p`
  font-size: 14px;
  line-height: 16.2px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 0;
`

const BoxGrid = styled.div`
  @media screen and (min-width: 1100px) {
    width: 66.66%;
    max-width: 53.75rem;
    margin: 0 auto;
    display: grid;
    margin-bottom: 5rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 5.625rem 5.625rem 5.625rem;
    gap: 1.875rem 1.875rem;
    grid-template-areas:
      "top top"
      "one two"
      "three four";

    > * {
      height: 100%;
      :nth-child(6n - 5) { grid-area: top; }
      :nth-child(6n - 4) { grid-area: one; }
      :nth-child(6n - 3) { grid-area: two; }
      :nth-child(6n - 2) { grid-area: three; }
      :nth-child(6n - 1) { grid-area: four; }
    }
  }
`

const Boxes = styled.div``

const Card = styled.div`
  width: 100%;
  background-color: black;
  color: #FFFF00;
  border-radius: 0.9375rem;
  margin-bottom: 1rem;
  min-height: 4.625rem;
  padding: 0.75rem 4rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &:nth-child(6) {
    background: yellow;
    color: black;
  }

  &:first-child {
    p {
      letter-spacing: -0.03em;
      font-size: 28px;
      line-height: 34px;
      font-family: 'Barlow Semi Condensed', sans-serif;
      font-weight: 600;
      margin-bottom: 0.5rem;
      line-height: 1;
    }
  }

  @media (min-width: 700px) {
    min-height: 5.25rem;
  }
  @media (min-width: 950px) {
    min-height: 4.625rem;
    padding: 1.5rem 1rem;
  }
  @media (min-width: 1100px) {
    padding: 0.625rem 1.25rem 0.875rem;
    min-height: 5.25rem;
  }
`

const SmallPrint = styled.div`
  color: #484848;
  font-size: 0.75rem;
  position: absolute;
  bottom: 0;
  right: 20px;
  transform: translateY(100%);
  padding-top: 2px;
  font-style: italic;
  letter-spacing: -0.02em;
`

const totalCardAnimation = keyframes`
 0% { background-color: white }
 10% { background-color: yellow }
 70% { background-color: yellow }
 100% { background-color: white}
`

const TotalCard = styled(Card)`
  && {
    background-color: 'white';
    animation: ${totalCardAnimation} 2s forwards 1 ease-out;
    color: black;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
    padding: 1rem 2rem;
  } 

  &:first-child {
    position: absolute;
  }

  @media (min-width: 1100px) {
    padding: 0.625rem 1.25rem 0.875rem;
    height: 6.25rem;
  }
`

const CountryTitle = styled.h4`
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: left;
  font-family: 'Work Sans';
  font-weight: bold;
  margin-bottom: 0.5em;
  letter-spacing:-0.03em;

  @media screen and (min-width: 1100px) {
    font-size: 1.25rem
    line-height: 1.875rem;
  }
`

const OrderTime = styled.span`
  font-size: 0.875rem;
  line-height: 1rem;

  @media screen and (min-width: 1100px) {
    font-size: 1.25rem
    line-height: 1.5rem;
  }
`

const CountryTotal = styled.span`
  font-size: 1.75rem;
  line-height: 2.125rem;
  flex-shrink: 1;
  font-weight: bold;
  white-space: nowrap;

  @media screen and (min-width: 1100px) {
    font-size: 2.25rem
    line-height: 2.75rem;
  }
`

export default Map
