// @flow strict-local
import React, { useEffect, useState } from 'react'
import t from 'format-message'
import SRContent from './ScreenReaderContent'

const millisecondsInASecond = 1000
const updateFequencyInMilliseconds = 100
const dayStart = new Date('2019-01-01T06:00:00Z')
const dayEnd = new Date('2019-01-01T18:00:00Z')

function pad(value: number) {
  return value < 10 ? '0' + value : value
}

function getDatetimeValue(date: Date) {
  return (
    pad(date.getUTCHours()) +
    ':' +
    pad(date.getUTCMinutes()) +
    ':' +
    pad(date.getUTCSeconds())
  )
}

function getWorkDayTime(elapsedSeconds: number) {
  const workDayTime = new Date(dayStart)
  workDayTime.setSeconds(elapsedSeconds)
  return workDayTime < dayEnd ? workDayTime : dayEnd
}

type Props = {
  onDayEnd: () => void,
}

function WorkDayClock({ onDayEnd }: Props) {
  const gameSecondsSpeedFactor = 360
  const [elapsedGameSeconds, setElapsedGameSeconds] = useState(0)
  const workDayTime = getWorkDayTime(elapsedGameSeconds)
  const hasWorkDayEnded = workDayTime === dayEnd
  const previousActualTime = performance.now()
  useEffect(() => {
    function tick() {
      const elapsedMilliseconds = performance.now() - previousActualTime
      const elapsedSeconds = elapsedMilliseconds / millisecondsInASecond
      const additionalGameSeconds = elapsedSeconds * gameSecondsSpeedFactor
      setElapsedGameSeconds(elapsedGameSeconds + additionalGameSeconds)
    }
    if (!hasWorkDayEnded) {
      const id = setTimeout(tick, updateFequencyInMilliseconds)
      return () => clearTimeout(id)
    } else {
      onDayEnd()
    }
  })

  return (
    <section aria-labelledby="clock-heading">
      <SRContent>
        <h2 id="clock-heading">{t('Work day clock')}</h2>
      </SRContent>
      <time dateTime={getDatetimeValue(workDayTime)}>
        {t.time(workDayTime, 'H:mm')}
      </time>

      <div>
        <SRContent>
          <h3>{t('Work day hours')}</h3>
        </SRContent>
        {t('6 AM - 6 PM')}
      </div>
    </section>
  )
}

export default WorkDayClock

@@ -148,43 +148,8 @@
 t'%0A%0A
-const millisecondsInASecond = 1000%0A
 cons
@@ -545,34 +545,53 @@
  get
-WorkDayTime(elapsedSeconds
+NewGameDate(previousGameDate: Date, timeToAdd
 : nu
@@ -602,34 +602,34 @@
 ) %7B%0A  const 
-workDayTim
+newGameDat
 e = new Date
@@ -633,57 +633,46 @@
 ate(
-dayStart)%0A  workDayTime.setSeconds(elapsedSeconds
+previousGameDate.getTime() + timeToAdd
 )%0A  
@@ -678,26 +678,26 @@
  return 
-workDayTim
+newGameDat
 e %3C dayE
@@ -701,26 +701,26 @@
 ayEnd ? 
-workDayTim
+newGameDat
 e : dayE
@@ -821,31 +821,24 @@
  const gameS
-econdsS
 peedFactor =
@@ -855,49 +855,29 @@
 st %5B
-elapsedGameSeconds, setElapsedGameSeconds
+gameDate, setGameDate
 %5D = 
@@ -885,17 +885,24 @@
 seState(
-0
+dayStart
 )%0A  cons
@@ -907,55 +907,62 @@
 nst 
-workDayTime = getWorkDayTime(elapsedGameSeconds
+%5BtimerTime, setTimerTime%5D = useState(performance.now()
 )%0A  
@@ -985,26 +985,23 @@
 Ended = 
-workDayTim
+gameDat
 e === da
@@ -1009,54 +1009,8 @@
 End%0A
-  const previousActualTime = performance.now()
 %0A  u
@@ -1060,35 +1060,28 @@
   const 
-elapsedMilliseconds
+newTimerTime
  = perfo
@@ -1096,102 +1096,59 @@
 ow()
- - previousActualTime%0A      const elapsedSeconds = elapsedMilliseconds / millisecondsInASecond
+%0A      const elapsedTime = newTimerTime - timerTime
 %0A   
@@ -1170,23 +1170,20 @@
 onalGame
-Seconds
+Time
  = elaps
@@ -1188,23 +1188,20 @@
 psed
-Seconds
+Time
  * gameS
 econ
@@ -1200,15 +1200,8 @@
 ameS
-econdsS
 peed
@@ -1217,73 +1217,249 @@
     
-setElapsedGameSeconds(elapsedGameSeconds + additionalGameSeconds)
+const newGameDate = getNewGameDate(gameDate, additionalGameTime)%0A      const didWorkDayJustEnd = newGameDate === dayEnd%0A      setGameDate(newGameDate)%0A      setTimerTime(newTimerTime)%0A      if (didWorkDayJustEnd) %7B%0A        onDayEnd()%0A      %7D
 %0A   
@@ -1593,38 +1593,8 @@
 id)%0A
-    %7D else %7B%0A      onDayEnd()%0A
     
@@ -1792,26 +1792,23 @@
 meValue(
-workDayTim
+gameDat
 e)%7D%3E%0A   
@@ -1824,18 +1824,15 @@
 ime(
-workDayTim
+gameDat
 e, '

Improve WorkDayClock a bit