Bar.tsx

import React, { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { AppStore } from 'store'
import { ScaleBand, ScaleLinear } from 'd3-scale'
import { DateTime } from 'luxon'
import { detect } from 'detect-browser'

import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { Dataload } from 'models'
import DateChartService from 'services/dateChart.service'
import {
  setCurrentDatachartIndex,
  setSelectedDate,
} from 'store/chart/chart.actions'

interface BarProps {
  index: number
  dataload: Dataload
  compareDataload: Dataload | null
  fluidType: FluidType
  timeStep: TimeStep
  showCompare: boolean
  xScale: ScaleBand<string>
  yScale: ScaleLinear<number, number>
  height: number
  isSwitching: boolean
  isDuel?: boolean
  isMultiMissingFluid?: boolean
  weekdays?: 'week' | 'weekend'
}

const Bar = ({
  index,
  dataload,
  compareDataload,
  fluidType,
  timeStep,
  showCompare,
  xScale,
  yScale,
  height,
  isSwitching,
  isDuel,
  isMultiMissingFluid,
  weekdays,
}: BarProps) => {
  const dispatch = useDispatch()
  const { selectedDate } = useSelector((state: AppStore) => state.ecolyo.chart)
  const [clicked, setClicked] = useState(false)
  const [animationEnded, setAnimationEnded] = useState(false)
  const [compareAnimationEnded, setCompareAnimationEnded] = useState(false)
  const browser = detect()

  const fluidStyle =
    fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]

  const handleClick = () => {
    if (!isSwitching && !isDuel) {
      setClicked(true)
      dispatch(setSelectedDate(dataload.date))
    }
  }

  const onAnimationEnd = () => {
    setClicked(false)
    setAnimationEnded(true)
  }

  const onCompareAnimationEnd = () => {
    setClicked(false)
    setCompareAnimationEnded(true)
  }

  const tempYScale: number | undefined = yScale(dataload.value)
  const yScaleValue: number = tempYScale ? tempYScale : 0
  const tempCompareYScale: number | undefined = yScale(
    compareDataload ? compareDataload.value : 0
  )
  const yScaleCompareValue: number = tempCompareYScale ? tempCompareYScale : 0
  const tempXScale: number | undefined = xScale(
    dataload.date.toLocaleString(DateTime.DATETIME_SHORT)
  )
  const xScaleValue: number = tempXScale ? tempXScale : 0

  const isSelectedDate = isDuel
    ? false
    : new DateChartService().compareStepDate(
        timeStep,
        selectedDate,
        dataload.date
      )

  const barClass = clicked
    ? `bar-${fluidStyle} ${weekdays} selected bounce-${
        browser && browser.name !== 'edge' ? '2' : '3'
      } delay`
    : isSelectedDate
    ? animationEnded
      ? `bar-${fluidStyle} ${weekdays} selected`
      : `bar-${fluidStyle} ${weekdays} selected bounce-${
          browser && browser.name !== 'edge' ? '1' : '3'
        } delay--${index % 13}`
    : animationEnded
    ? `bar-${fluidStyle} ${weekdays}`
    : `bar-${fluidStyle} ${weekdays} bounce-${
        browser && browser.name !== 'edge' ? '1' : '3'
      } delay--${index % 13}`

  const barBackgroundClass = isSelectedDate

  const compareBarClass = clicked
    ? `bar-compare-${fluidStyle} selected bounce-${
        browser && browser.name !== 'edge' ? '2' : '3'
      } delay--0`
    : isSelectedDate
    ? compareAnimationEnded
      ? `bar-compare-${fluidStyle} selected`
      : `bar-compare-${fluidStyle} selected bounce-${
          browser && browser.name !== 'edge' ? '1' : '3'
        } delay--${index % 13}`
    : compareAnimationEnded
    ? `bar-compare-${fluidStyle} `
    : `bar-compare-${fluidStyle} bounce-${
        browser && browser.name !== 'edge' ? '1' : '3'
      } delay--${index % 13}`

  const getBandWidth = (): number => {
    return showCompare ? xScale.bandwidth() / 2 : xScale.bandwidth()
  }

  const topRoundedRect = (
    _x: number,
    _y: number,
    _width: number,
    _height: number
  ): string => {
    const radius = _height > 4 ? 4 : _height / 4
    return (
      'M' +
      _x +
      ',' +
      (_y + radius) +
      ' a' +
      radius +
      ',' +
      radius +
      ' 0 0 1 ' +
      radius +
      ',' +
      -radius +
      'h' +
      (_width - 2 * radius) +
      'a' +
      radius +
      ',' +
      radius +
      ' 0 0 1 ' +
      radius +
      ',' +
      radius +
      'v' +
      (_height - radius) +
      'h' +
      -_width +
      'z'
    )
  }

  useEffect(() => {
    if (isSelectedDate && !isDuel) {
      setClicked(true)
      dispatch(setCurrentDatachartIndex(index))
    }
  }, [dispatch, isSelectedDate, isDuel, index])

  return (
    <g>
      {height > 0 ? (
        <g
          transform={`translate(${xScaleValue}, -40)`}
          className="barContainer"
        >
          <rect
            onClick={handleClick}
            x="0"
            y="0"
            width={showCompare ? getBandWidth() * 2 : getBandWidth()}
            height={height + 40}
            className={`background-${barBackgroundClass}`}
            fill="#E0E0E0"
          />
        </g>
      ) : null}
      {height > 0 &&
      dataload.value &&
      dataload.value >= 0 &&
      isMultiMissingFluid ? (
        <g
          transform={`translate(${xScaleValue}, ${yScaleValue})`}
          fill="#00000"
          className="barFill"
        >
          <defs>
            <linearGradient
              id="gradient"
              className={barClass}
              x1="0"
              x2="0"
              y1="0"
              y2="1"
            >
              <stop id="stop-color-1" offset="0%" />
              <stop id="stop-color-2" offset="100%" />
            </linearGradient>
            <pattern
              id="diagonalHatch"
              patternUnits="userSpaceOnUse"
              width="8"
              height="8"
              patternTransform="scale(1) rotate(-45)"
            >
              <rect x="0" y="0" width="100%" height="100%" fill="#121212" />
              <path d="M0 8h20z" strokeWidth="3" stroke="#71612E" fill="none" />
            </pattern>
            <pattern
              id="diagonalHatchSelected"
              patternUnits="userSpaceOnUse"
              width="8"
              height="8"
              patternTransform="scale(1) rotate(-45)"
            >
              <rect x="0" y="0" width="100%" height="100%" fill="#121212" />
              <path d="M0 8h20z" strokeWidth="3" stroke="#E3B82A" fill="none" />
            </pattern>
          </defs>
          <path
            d={topRoundedRect(
              showCompare ? getBandWidth() : 0,
              0,
              getBandWidth(),
              height - yScaleValue
            )}
            stroke={!isSelectedDate ? '#71612E' : '#e3b82a'}
            fill={
              isSelectedDate
                ? 'url(#diagonalHatchSelected)'
                : 'url(#diagonalHatch)'
            }
            // className={isDuel ? 'bar-duel' : barClass}
            onClick={handleClick}
            onAnimationEnd={onAnimationEnd}
          />
        </g>
      ) : height > 0 && dataload.value && dataload.value >= 0 ? (
        <g transform={`translate(${xScaleValue}, ${yScaleValue})`}>
          <defs>
            <linearGradient
              id="gradient"
              className={barClass}
              x1="0"
              x2="0"
              y1="0"
              y2="1"
            >
              <stop id="stop-color-1" offset="0%" />
              <stop id="stop-color-2" offset="100%" />
            </linearGradient>
          </defs>
          <path
            d={topRoundedRect(
              showCompare ? getBandWidth() : 0,
              0,
              getBandWidth(),
              height - yScaleValue
            )}
            fill="url(#gradient)"
            className={isDuel ? 'bar-duel' : barClass}
            onClick={handleClick}
            onAnimationEnd={onAnimationEnd}
          />
        </g>
      ) : null}

      {showCompare &&
      compareDataload &&
      compareDataload.value &&
      compareDataload.value >= 0 ? (
        <g transform={`translate(${xScaleValue}, ${yScaleCompareValue})`}>
          <defs>
            <linearGradient
              id="gradient-compare"
              className={compareBarClass}
              x1="0"
              x2="0"
              y1="0"
              y2="1"
            >
              <stop id="stop-compare-color-1" offset="0%" />
              <stop id="stop-compare-color-2" offset="100%" />
            </linearGradient>
          </defs>
          <path
            d={topRoundedRect(
              0,
              0,
              getBandWidth(),
              height - yScaleCompareValue
            )}
            fill="url(#gradient-compare)"
            className={compareBarClass}
            onClick={handleClick}
            onAnimationEnd={onCompareAnimationEnd}
          />
        </g>
      ) : null}
    </g>
  )
}

export default Bar