import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import Nav from '../../../components/Nav';

import CollectionCreate from '../components/CollectionCreate';
import Collection from '../components/Collection';

class CollectionView extends React.Component {
  static defaultProps = {
    user: null,
  };

  componentDidMount() {
    document.body.className = this.props.theme;
  }

  ownerName() {
    if (this.props.params.username) {
      return this.props.params.username;
    }

    return this.props.user.username;
  }

  pageTitle() {
    if (this.isCreatePage()) {
      return 'Create collection';
    }

    return 'collection';
  }

  isOwner() {
    return this.props.user.username === this.props.params.username;
  }

  isCreatePage() {
    const path = this.props.location.pathname;
    return /create$/.test(path);
  }

  renderContent() {
    if (this.isCreatePage() && this.isOwner()) {
      return <CollectionCreate />;
    }

    return (
      <Collection
        collectionId={this.props.params.collection_id}
        username={this.props.params.username}
      />
    );
  }

  render() {
    return (
      <div className="dashboard">
        <Nav layout="dashboard" />

        {this.renderContent()}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user,
    theme: state.preferences.theme
  };
}

function mapDispatchToProps(dispatch) {
  return {};
}

CollectionView.propTypes = {
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired,
  }).isRequired,
  params: PropTypes.shape({
    collection_id: PropTypes.string.isRequired,
    username: PropTypes.string.isRequired,
  }).isRequired,
  theme: PropTypes.string.isRequired,
  user: PropTypes.shape({
    username: PropTypes.string,
  }),
};

export default connect(mapStateToProps, mapDispatchToProps)(CollectionView);