import React from 'react';
import PropTypes from 'prop-types';

import IDUtil from '../../../../util/IDUtil';
import { setBreadCrumbsFromMatch } from '../../helpers/BreadCrumbs';
import ProjectForm from './ProjectForm';

export default class ProjectCreateView extends React.PureComponent {

    componentDidMount() {
        setBreadCrumbsFromMatch(this.props.match);
    }

    render() {
        return (
            <div className={IDUtil.cssClassName('project-create')}>
                <div className="info-bar">
                    <h2>Create User Project</h2>
                    <p>
                        A user project contains Bookmarks & Annotations and Tool Sessions
                    </p>
                </div>

                <ProjectForm
                    submitButton="create"
                    cancelLink="/workspace/projects"
                    project={{
                        name: '',
                        description: '',
                        user: this.props.user.id
                    }}
                    projectDidSave={projectId => {
                        // navigate to new project page
                        this.props.history.push(
                            '/workspace/projects/' + encodeURIComponent(projectId)
                        );
                    }}
                    user={this.props.user}
                    api={this.props.api}/>
            </div>
        )
    }
}

ProjectCreateView.propTypes = {
    api: PropTypes.func.isRequired,
    user: PropTypes.shape({
        id: PropTypes.string.isRequired,
        name: PropTypes.string,
        attributes: PropTypes.shape({
            allowPersonalCollections: PropTypes.bool
        })
    }).isRequired,
    match: PropTypes.object.isRequired
};