import React, { useState, useEffect } from 'react';

export interface Props {
  startTime: Date | string;
  endTime?: Date | string | null;
}

const TimeElapsed = ({ startTime, endTime }: Props) => {
  const [elapsed, setElapsed] = useState(
    (new Date(endTime || Date.now()).getTime() -
      new Date(startTime).getTime()) /
      1000
  );

  useEffect(() => {
    if (endTime) return;
    const interval = setInterval(() => {
      setElapsed(
        (new Date(endTime || Date.now()).getTime() -
          new Date(startTime).getTime()) /
          1000
      );
    }, 1000);
    return () => clearInterval(interval);
  }, [startTime, endTime]);

  const hours = Math.floor(elapsed / 60 / 60);
  const minutes = Math.floor((elapsed - hours * 60 * 60) / 60);
  const seconds = Math.floor(elapsed - hours * 60 * 60 - minutes * 60);

  const hoursString = `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
    .toString()
    .padStart(2, '0')}`;

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        margin: '0 1rem'
      }}
    >
      <pre
        style={{
          fontSize: '1rem',
          margin: 0
        }}
      >
        <code>{hoursString}</code>
      </pre>
      <p
        style={{
          fontSize: '0.75rem',
          margin: 0
        }}
      >
        <span>
          {Intl.DateTimeFormat('it-IT', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
          }).format(new Date(startTime))}
        </span>
        <span dangerouslySetInnerHTML={{ __html: '&nbsp;&mdash;&nbsp;' }} />
        <span>
          {endTime
            ? Intl.DateTimeFormat('it-IT', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
              }).format(new Date(endTime))
            : 'now'}
        </span>
      </p>
    </div>
  );
};

export default TimeElapsed;
