import React from 'react';
import { useSelector } from 'react-redux';

import { style } from 'app/styles';
import { getAuthorDateRange } from 'app/selectors/commits';
import { StackedLabel } from 'app/components/StackedLabel';
import { EpochSpan } from 'app/components/EpochSpan';
import { ExplodeOnChange } from 'app/components/ExplodeOnChange';

const outerStyle = {
  _extends: ['flexRow'],
  marginBottom: '@margins.medium+px',
  paddingLeft: '@margins.medium+px',
  flexShrink: 0,
};

export const Stats: React.FC = (): React.ReactElement => {
  const { minAuthorDate, maxAuthorDate } = useSelector(getAuthorDateRange);

  return (
    <div style={style(outerStyle)}>
      <StackedLabel label="Selected Time Span">
        <ExplodeOnChange value={minAuthorDate + maxAuthorDate}>
          <EpochSpan
            firstEpochTime={minAuthorDate}
            secondEpochTime={maxAuthorDate}
          />
        </ExplodeOnChange>
      </StackedLabel>
      <StackedLabel label="Last Commit">
        <div>
          <ExplodeOnChange value={maxAuthorDate}>
            <EpochSpan
              firstEpochTime={maxAuthorDate}
              secondEpochTime={Date.now() / 1000}
            />
            <span> ago</span>
          </ExplodeOnChange>
        </div>
      </StackedLabel>
    </div>
  );
};