import React from 'react';
import classNames from 'classnames';
import {ItemUrgency, TypeIcon} from './index';
import {gettext} from 'core/utils';
import {IArticle} from 'superdesk-api';
import {querySelectorParent} from 'core/helpers/dom/querySelectorParent';
import ng from 'core/services/ng';

interface IProps {
    item?: any;
    selected?: boolean;
    canEdit?: boolean;
    customMonitoringWidget?: boolean;
    preview: (item: IArticle) => void;
    select: (item: IArticle) => void;
    edit: (item: IArticle) => void;
}

/**
 * @ngdoc React
 * @module superdesk.search
 * @name WidgetItemComponent
 * @description This component is a row in monitoring widget item list.
 */
export class WidgetItem extends React.Component<IProps, any> {
    item: any;

    constructor(props) {
        super(props);
        this.item = props.item;

        this.preview = this.preview.bind(this);
        this.select = this.select.bind(this);
        this.edit = this.edit.bind(this);
    }

    preview() {
        this.props.preview(this.item);
    }

    select(e) {
        if (querySelectorParent(e.target, 'button', {self: true})) {
            return;
        }

        if (!this.item.gone) {
            this.props.select(this.item);
        }
    }

    edit() {
        if (!this.item.gone) {
            this.props.edit(this.item);
        }
    }

    render() {
        const {shortFormat} = ng.get('datetime');
        const className = classNames(
            'content-item',
            {'content-item--locked': this.item.lock_user},
            {'custom-monitoring': this.props.customMonitoringWidget},
            {shifted: this.props.canEdit},
            {active: this.props.selected},
            {gone: !!this.item.gone},
        );

        return (
            <li onClick={this.select} onDoubleClick={this.edit} className={className}>
                <div className="content-item__type">
                    <TypeIcon
                        type={this.item.type}
                        highlight={this.item.highlight}
                    />
                </div>
                <div className="content-item__urgency-field">
                    <ItemUrgency urgency={this.item.urgency} language={this.item.language} />
                </div>
                <div className="content-item__text">
                    <span className="keywords">{this.item.slugline}</span>
                    <span id="title" className="headline">{this.item.headline}</span>
                </div>
                <div className="content-item__date">
                    <time>{shortFormat(this.item.versioncreated)}</time>
                </div>
                {this.props.canEdit && !this.item.gone ? (
                    <div className="content-item__action">
                        {this.item.type !== 'composite'
                            ? (
                                <button
                                    className="icn-btn"
                                    onClick={this.preview}
                                    title={gettext('Preview')}
                                >
                                    <i className="icon-external" />
                                </button>
                            )
                            : ''
                        }
                        { this.props.customMonitoringWidget ?
                            ''
                            : (
                                <button
                                    className="icn-btn"
                                    onClick={this.edit}
                                    title={gettext('Edit')}
                                >
                                    <i className="icon-pencil" />
                                </button>
                            )}
                    </div>
                )
                    :
                    ''
                }
            </li>
        );
    }
}