/*
 * Copyright (C) 2020 HERE Europe B.V.
 * Licensed under MIT, see full license in LICENSE
 * SPDX-License-Identifier: MIT
 */

import React from "react"
import { Box } from "@chakra-ui/core"
import { Area } from "@vx/shape"
import { scaleLinear } from "@vx/scale"
import { keyframes } from "@emotion/core"

import { useDataTypeStore } from "../../utils/store"

const blink = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const TimeSeries = ({ points, dates, currentDate }) => {
  const currentDataType = useDataTypeStore(state => state.currentDataType)

  const width = 440
  const height = 55

  const prefix = currentDataType === 0
    ? ""
    : currentDataType === 1
      ? "deaths_"
      : "recoveries_"

  const timeSeries2 = dates.map((date, i) => {
    const confirmedSum = points.reduce((acc, cur) => {
      return acc + parseFloat(cur.properties[date] || 0)
    }, 0)
    const sum = points.reduce((acc, cur) => {
      return acc + parseFloat(cur.properties[prefix + date] || 0)
    }, 0)
    return {
      date: new Date(date),
      dateIndex: i, 
      value: sum,
      confirmedSum,
    }
  })

  const timeSeries = [timeSeries2]

  const xScale = scaleLinear({
    domain: [0, dates.length - 1],
    range: [1, width - 1],
  })

  const yScale = scaleLinear({
    domain: [0, timeSeries[0][timeSeries[0].length - 1].confirmedSum],
    range: [height, 2],
  })

  const x = d => d.dateIndex
  const y = d => d.value

  return (
    <Box mb="-0.5rem">
      <svg viewBox={`0 0 ${width} ${height}`} style={{ width: "100%", height: "auto" }}>
        {
          timeSeries.map((oneSeries, i) => {
            return (
              <g key={`series-${i}`}>
                <Area
                  data={oneSeries}
                  x1={d => xScale(x(d))}
                  y1={d => yScale(y(d))}
                  x0={d => xScale(x(d))}
                  y0={height}
                  fill="#FBDFCF"
                />
                <Area
                  data={oneSeries}
                  x={d => xScale(x(d))}
                  y={d => yScale(y(d))}
                  stroke="#F5B086"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </g>
            )
          })
        }

        <rect
          x={xScale(currentDate)}
          y={0}
          width={width + 10}
          height={height}
          fill="rgba(255,255,255,0.8)"
        />

        <Box
          as="rect"
          x={xScale(timeSeries2.length - 2)}
          y={0}
          width={width / timeSeries2.length}
          height={height}
          fill="rgba(255,255,255,0.4)"
        />

        <line
          x1={xScale(currentDate)}
          x2={xScale(currentDate)}
          y1={0}
          y2={height}
          stroke="#FFF"
          strokeWidth={5}
        />
        <Box
          as="line"
          x1={xScale(currentDate)}
          x2={xScale(currentDate)}
          y1={1}
          y2={height}
          stroke="#ec610e"
          strokeWidth={2}
          strokeLinecap="round"
          strokeDasharray={[3,3]}
          animation={`${blink} 1s linear infinite alternate`}
        />
      </svg>
    </Box>
  )
}

export default TimeSeries