import React from 'react'
import { useSelector } from 'react-redux'
import { selectTotalTime } 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 TotalTime = () => {
  const millis = useSelector(selectTotalTime)
  return (
    <div>
      <h2>Time needed</h2>
      Time needed for Text: {formatTime(millis / 1000)}
    </div>
  )
}