// @flow
import * as React from 'react';
import styled from 'styled-components';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import { inject, observer } from 'mobx-react';
import { withRouter, type RouterHistory } from 'react-router-dom';
import { EditIcon } from 'outline-icons';
import Flex from 'shared/components/Flex';
import HelpText from 'components/HelpText';
import Modal from 'components/Modal';
import Button from 'components/Button';
import Avatar from 'components/Avatar';
import Badge from 'components/Badge';
import PaginatedDocumentList from 'components/PaginatedDocumentList';
import Subheading from 'components/Subheading';
import User from 'models/User';
import DocumentsStore from 'stores/DocumentsStore';
import AuthStore from 'stores/AuthStore';
import { settings } from 'shared/utils/routeHelpers';

type Props = {
  user: User,
  auth: AuthStore,
  documents: DocumentsStore,
  history: RouterHistory,
  onRequestClose: () => void,
};

@observer
class UserProfile extends React.Component<Props> {
  render() {
    const { user, auth, documents, ...rest } = this.props;
    if (!user) return null;
    const isCurrentUser = auth.user && auth.user.id === user.id;

    return (
      <Modal
        title={
          <Flex align="center">
            <Avatar src={user.avatarUrl} size={38} />
            <span>&nbsp;{user.name}</span>
          </Flex>
        }
        {...rest}
      >
        <Flex column>
          <Meta>
            {isCurrentUser
              ? 'You joined'
              : user.lastActiveAt ? 'Joined' : 'Invited'}{' '}
            {distanceInWordsToNow(new Date(user.createdAt))} ago.
            {user.isAdmin && (
              <StyledBadge admin={user.isAdmin}>Admin</StyledBadge>
            )}
            {user.isSuspended && <Badge>Suspended</Badge>}
            {isCurrentUser && (
              <Edit>
                <Button
                  onClick={() => this.props.history.push(settings())}
                  icon={<EditIcon />}
                  neutral
                >
                  Edit Profile
                </Button>
              </Edit>
            )}
          </Meta>
          <PaginatedDocumentList
            documents={documents.createdByUser(user.id)}
            fetch={documents.fetchOwned}
            options={{ user: user.id }}
            heading={<Subheading>Recently updated</Subheading>}
            empty={
              <HelpText>{user.name} hasn’t updated any documents yet.</HelpText>
            }
            showCollection
          />
        </Flex>
      </Modal>
    );
  }
}

const Edit = styled.span`
  position: absolute;
  top: 46px;
  right: 0;
`;

const StyledBadge = styled(Badge)`
  position: relative;
  top: -2px;
`;

const Meta = styled(HelpText)`
  margin-top: -12px;
`;

export default inject('documents', 'auth')(withRouter(UserProfile));