import { Component, PropTypes } from 'react';
import urls from 'bitbucket/internal/impl/urls';
import Icon from '../../aui-react/icon';

class Summary extends Component {
    static get propTypes() {
        return {
            pullRequest: PropTypes.object.isRequired,
        };
    }

    shouldComponentUpdate(newProps) {
        return this.props.pullRequest.id !== newProps.pullRequest.id ||
            this.props.pullRequest.title !== newProps.pullRequest.title ||
            this.props.pullRequest.to_ref.id !== newProps.pullRequest.to_ref.id ||
            this.props.pullRequest.updated_date !== newProps.pullRequest.updated_date;
    }

    render() {
        const pullRequest = this.props.pullRequest;
        return (
            <td className="summary">
                <div className="title-and-target-branch">
                    <a
                        className="pull-request-title"
                        title={pullRequest.title}
                        href={urls.inboxPullRequest(pullRequest.to_ref.repository.project, pullRequest.to_ref.repository, pullRequest)}
                    >
                        {pullRequest.title}
                    </a>
                </div>

                <div className="pull-request-project-repo">
                    <span className="project-name">{pullRequest.to_ref.repository.project.name}</span>
                    <Icon size="small" icon="collapsed" />
                    <span className="repo-name">{pullRequest.to_ref.repository.name}</span>
                </div>
            </td>
        );
    }
}

Summary.Header = () => <th className="summary" scope="col">{AJS.I18n.getText('bitbucket.pull.request.table.title.summary')}</th>;

export default Summary;
