From 6cc58a70bd3e2f8ae1591daf70a061010a8075d3 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sun, 22 Dec 2019 12:17:53 +0100
Subject: [PATCH] Add a time estimate

---
 src/components/RsvpReader.js |  2 ++
 src/components/TimeCalc.js   | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/components/TimeCalc.js

diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index c153d8f..12f9b6b 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -9,6 +9,7 @@ import { PlayerControl } from './PlayerControl'
 import styles from './RsvpReader.css'
 import { PipeMarker, BorderMarker } from './PivotMarker'
 import { Progress } from './Progress'
+import { TimeCalc } from './TimeCalc'
 
 export const RsvpReader = () => {
   return (
@@ -27,6 +28,7 @@ export const RsvpReader = () => {
           </SegmentControl>
         </div>
         <Options></Options>
+        <TimeCalc />
       </div>
       <div className={styles.item}>
         <TextOutput />
diff --git a/src/components/TimeCalc.js b/src/components/TimeCalc.js
new file mode 100644
index 0000000..aaf3a67
--- /dev/null
+++ b/src/components/TimeCalc.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { selectSegments, selectWpm } from '../store/selectors'
+
+function formatTime(totalSeconds) {
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+  const pad = num => String(num).padStart(2, '0')
+  return `${hours}:${pad(minutes)}:${pad(seconds)}`
+}
+
+export const TimeCalc = () => {
+  const wpm = useSelector(selectWpm)
+  const segments = useSelector(selectSegments)
+  const minutesNeeded = segments.length / wpm
+  return (
+    <div>
+      <h2>Time needed</h2>
+      Time needed for Text: {formatTime(minutesNeeded * 60)}
+    </div>
+  )
+}