// @flow
import * as React from 'react';
import styled from 'styled-components';
import { inject } from 'mobx-react';
import ViewsStore from 'stores/ViewsStore';
import Document from 'models/Document';
import PublishingInfo from 'components/PublishingInfo';

type Props = {|
  views: ViewsStore,
  document: Document,
  isDraft: boolean,
|};

function DocumentMeta({ views, isDraft, document }: Props) {
  const totalViews = views.countForDocument(document.id);

  return (
    <Meta document={document}>
      {totalViews && !isDraft ? (
        <React.Fragment>
          &nbsp;&middot; Viewed{' '}
          {totalViews === 1 ? 'once' : `${totalViews} times`}
        </React.Fragment>
      ) : null}
    </Meta>
  );
}

const Meta = styled(PublishingInfo)`
  margin: -12px 0 2em 0;
  font-size: 14px;
`;

export default inject('views')(DocumentMeta);