import { Component, PropTypes } from 'react';
import urls from 'bitbucket/internal/impl/urls';
import { format as formatTime } from 'bitbucket/internal/util/time';

import Icon from '../../aui-react/icon';
import RefLabel from '../../ref-label/ref-label';

const propTypes = {
    pullRequest: PropTypes.object.isRequired,
};

const customMapping = {
    aMomentAgo: function() {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.a.moment.ago');
    },
    oneMinuteAgo: function() {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.one.minute.ago');
    },
    xMinutesAgo: function(param) {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.x.minutes.ago', param);
    },
    oneHourAgo: function() {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.one.hour.ago');
    },
    xHoursAgo: function(param) {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.x.hours.ago', param);
    },
    oneDayAgo: function() {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.one.day.ago');
    },
    xDaysAgo: function(param) {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.x.days.ago', param);
    },
    oneWeekAgo: function() {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.one.week.ago');
    },
    defaultType: function(param) {
        return AJS.I18n.getText('bitbucket.pull.request.updated.date.format.absolute', param);
    },
};

class Summary extends Component {

    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 props = this.props;
        const pullRequest = props.pullRequest;

        return (
            <td className="summary">
                <div className="title-and-target-branch">
                    <a
                        className="pull-request-title"
                        title={pullRequest.title}
                        href={urls.pullRequest(pullRequest)}
                    >
                        {pullRequest.title}
                    </a>
                    <Icon size="small" icon="devtools-arrow-right" />
                    <span className="pull-request-target-branch">
                        <RefLabel scmRef={pullRequest.to_ref} />
                    </span>
                </div>

                <div className="pr-author-number-and-timestamp">
                    <span>{pullRequest.author.user.display_name} - #{pullRequest.id}, </span>
                    <time
                        title={formatTime(pullRequest.updated_date, 'full')}
                        dateTime={formatTime(pullRequest.updated_date, 'timestamp')}
                    >
                        {formatTime(pullRequest.updated_date, 'shortAge', customMapping)}
                    </time>
                </div>
            </td>
        );
    }
}

const headerPropTypes = {
    colSpan: PropTypes.number,
};

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

Header.propTypes = headerPropTypes;
Summary.propTypes = propTypes;

Summary.Header = Header;

export default Summary;
