'use strict';
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
require("../../stylesheets/attachments/actions.scss");
const classnames_1 = __importDefault(require("classnames"));
const React = __importStar(require("react"));
const slug_1 = __importDefault(require("slug"));
const emoji_1 = __importDefault(require("../../utils/emoji"));
class ActionButtonWithConfirm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };
        this.state = { showModal: false };
    }
    toggleModal() {
        this.setState({ showModal: !this.state.showModal });
    }
    render() {
        const { text, style, confirm, openActionModal, messageId, triggers } = this.props;
        const emojiText = emoji_1.default.toImage(text);
        return (React.createElement("div", { onClick: e => openActionModal(confirm, messageId, triggers, e), className: classnames_1.default({
                action__button: true,
                'action__button--default': style !== 'danger' || style !== 'primary',
                'action__button--primary': style === 'primary',
                'action__button--danger': style === 'danger'
            }) },
            React.createElement("span", { className: "action__button-text", dangerouslySetInnerHTML: { __html: emojiText } })));
    }
}
class ActionButton extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
        this.onClick = this.onClick.bind(this);
    }
    render() {
        const { text, style } = this.props;
        const emojiText = emoji_1.default.toImage(text);
        return (React.createElement("div", { className: classnames_1.default('action__button', {
                'action__button--default': !['danger', 'primary'].includes(style),
                'action__button--primary': style === 'primary',
                'action__button--danger': style === 'danger'
            }), onClick: this.onClick },
            React.createElement("span", { className: "action__button-text", dangerouslySetInnerHTML: { __html: emojiText } })));
    }
    onClick(e) {
        console.log('CLICK RECORDED');
    }
}
class ActionSelectList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filter: ''
        };
        this.filterOptions = this.filterOptions.bind(this);
        this.closeOnEscapeOrEnter = this.closeOnEscapeOrEnter.bind(this);
        this.renderOptions = this.renderOptions.bind(this);
        this.renderOptionGroups = this.renderOptionGroups.bind(this);
        this.renderUsersOptions = this.renderUsersOptions.bind(this);
        this.renderChannelsOptions = this.renderChannelsOptions.bind(this);
        this.renderConversationsOptions = this.renderConversationsOptions.bind(this);
        this.onClick = this.onClick.bind(this);
    }
    componentDidMount() {
        window.addEventListener('keyup', this.closeOnEscapeOrEnter);
    }
    componentWillUnmount() {
        window.removeEventListener('keyup', this.closeOnEscapeOrEnter);
    }
    render() {
        const { options, optionGroups, dataSource } = this.props;
        const { filter } = this.state;
        let optionElements;
        if (options && (dataSource === 'static' || !dataSource)) {
            optionElements = this.renderOptions(options);
        }
        // Option groups supersedes options
        if (optionGroups && dataSource === 'static') {
            optionElements = this.renderOptionGroups(optionGroups);
        }
        if (dataSource === 'users') {
            optionElements = this.renderUsersOptions(options);
        }
        if (dataSource === 'channels') {
            optionElements = this.renderChannelsOptions(options);
        }
        if (dataSource === 'conversations') {
            optionElements = this.renderConversationsOptions(options);
        }
        if (dataSource === 'external') {
            optionElements = [];
        }
        return (React.createElement("div", { className: "action__select-list-container" },
            React.createElement("div", { className: "action__select-list-filter" },
                React.createElement("input", { autoFocus: true, onClick: e => e.stopPropagation(), onChange: this.filterOptions, onKeyUp: this.closeOnEscapeOrEnter, className: "action__select-list-filter-input", placeholder: "Filter list" })),
            React.createElement("div", { className: "action__select-list" },
                optionElements,
                !optionElements.length && (React.createElement("div", { className: "action__select-list-empty" },
                    React.createElement("div", null,
                        "No items matched ",
                        React.createElement("span", { className: "action__select-list-filter-text" }, filter)))))));
    }
    renderOptionGroups(optionGroups) {
        return optionGroups.map((optionGroup, idx) => {
            const options = this.renderOptions(optionGroup.options);
            const element = (React.createElement("div", { key: idx, className: "action__select-list-group" },
                React.createElement("div", { className: "action__select-list-group-text", dangerouslySetInnerHTML: {
                        __html: emoji_1.default.toImage(optionGroup.text)
                    } }),
                options));
            return options.length ? element : null;
        });
    }
    renderOptions(options) {
        return options
            .filter(opt => opt.text.toLowerCase().indexOf(this.state.filter.toLowerCase()) > -1)
            .map((option, idx) => {
            return (React.createElement("div", { key: idx, className: "action__select-list-item", "data-value": option.text, onClick: this.onClick },
                React.createElement("div", { className: "action__select-list-item-text", dangerouslySetInnerHTML: { __html: emoji_1.default.toImage(option.text) } }),
                option.description && (React.createElement("div", { className: "action__select-list-item-text action__select-list-item-text--description", dangerouslySetInnerHTML: {
                        __html: emoji_1.default.toImage(option.description)
                    } }))));
        });
    }
    renderUsersOptions(options) {
        return options
            .filter(opt => opt.text.toLowerCase().indexOf(this.state.filter.toLowerCase()) > -1)
            .map((option, idx) => {
            return (React.createElement("div", { key: idx, className: classnames_1.default('action__select-list-item action__select-list-item--user', {
                    'action__select-list-item--offline': !option.active
                }), onClick: this.onClick, "data-value": `@${option.text}` },
                React.createElement("div", { className: "action__select-list-item-avatar", style: {
                        backgroundImage: option.url ? `url(${option.url})` : ''
                    } }, option.emoji),
                React.createElement("div", { className: "action__select-list-item-text" }, option.text),
                React.createElement("div", { className: "action__select-list-item-presence" })));
        });
    }
    renderChannelsOptions(options) {
        return options
            .filter(opt => opt.text.toLowerCase().indexOf(this.state.filter.toLowerCase()) > -1)
            .map((option, idx) => {
            const text = slug_1.default(option.text).toLowerCase();
            return (React.createElement("div", { key: idx, className: "action__select-list-item", onClick: this.onClick, "data-value": `#${text}` },
                React.createElement("div", { className: "action__select-list-item-channel-icon" }, "#"),
                React.createElement("div", { className: "action__select-list-item-text" }, text)));
        });
    }
    renderConversationsOptions(options) {
        return options
            .filter(opt => opt.text.toLowerCase().indexOf(this.state.filter.toLowerCase()) > -1)
            .map((option, idx) => {
            const text = slug_1.default(option.text).toLowerCase();
            if (option.type === 'channel') {
                return (React.createElement("div", { key: idx, className: "action__select-list-item", onClick: this.onClick, "data-value": `#${text}` },
                    React.createElement("div", { className: "action__select-list-item-channel-icon" }, "#"),
                    React.createElement("div", { className: "action__select-list-item-text" }, text)));
            }
            return (React.createElement("div", { key: idx, className: classnames_1.default('action__select-list-item', {
                    'action__select-list-item--offline': !option.active
                }), onClick: this.onClick, "data-value": `@${text}` },
                React.createElement("div", { className: "action__select-list-item-presence" }),
                React.createElement("div", { className: "action__select-list-item-text" }, slug_1.default(option.text).toLowerCase())));
        });
    }
    onClick(e) {
        if (!this.props.triggers.length)
            return;
        if (this.props.confirm)
            return;
        this.props.handleTriggers(this.props.triggers, e);
    }
    closeOnEscapeOrEnter(e) {
        if (e.which === 27 || e.which === 13)
            return this.props.close();
    }
    filterOptions(e) {
        this.setState({ filter: e.target.value });
    }
}
class ActionSelectStatic extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { openUpwards, open, menuId, onClick, cancelMessageMenu, text, options, optionGroups, selectedOption, dataSource, confirm, triggers, handleTriggers } = this.props;
        const wrappedOnClick = e => onClick(menuId, confirm, triggers, e);
        return (React.createElement("div", { className: classnames_1.default('action__select', {
                'action__select--show': open,
                'action__select--open-up': openUpwards // Open down is default
            }), onClick: wrappedOnClick },
            open && (React.createElement("div", { className: "action__select-backdrop", onClick: cancelMessageMenu, ref: el => {
                    this._backdrop = el;
                } })),
            React.createElement("span", { className: "action__select-text" }, (selectedOption && selectedOption.text) || text),
            React.createElement("span", { className: "action__select-trigger icon-caret" }),
            open && (React.createElement(ActionSelectList, { dataSource: dataSource, options: options, optionGroups: optionGroups, close: wrappedOnClick, handleTriggers: handleTriggers, triggers: triggers, confirm: confirm }))));
    }
}
class ActionSelect extends React.PureComponent {
    render() {
        const { action, menuId, open, openUpwards, onClick, cancelMessageMenu, actionIdx } = this.props;
        const { _selectedOption } = action;
        const hasOptions = !!action.options;
        const hasGroups = !!action.option_groups;
        let selectedOption = null;
        if (!Array.isArray(_selectedOption) && !_selectedOption !== null && _selectedOption >= 0 && hasOptions) {
            selectedOption = action.options[_selectedOption];
        }
        if (Array.isArray(_selectedOption) && hasGroups) {
            const [groupId, optionId] = _selectedOption;
            selectedOption = action.option_groups[groupId].options[optionId];
        }
        return (React.createElement(ActionSelectStatic, { text: action.text, dataSource: action.data_source, options: action.options, optionGroups: action.option_groups, confirm: action.confirm, selectedOption: selectedOption, open: open, openUpwards: openUpwards, onClick: onClick, cancelMessageMenu: cancelMessageMenu, menuId: menuId, actionIdx: actionIdx }));
    }
}
class Actions extends React.Component {
    constructor(props) {
        super(props);
        this.toggleMessageMenu = this.toggleMessageMenu.bind(this);
        this.addTrigger = this.addTrigger.bind(this);
    }
    render() {
        const { openMenuAttachmentIdx, openMenuMessageIdx, openMenuIdx, openMenuUpwards, attachmentIdx, messageIdx, messageId, actions, cancelMessageMenu } = this.props;
        return (React.createElement("div", { className: "actions", ref: el => {
                this._actions = el;
            } }, actions.map((action, index) => {
            let idx = `${index}`;
            action = Object.assign({}, action);
            if (action.type === 'select') {
                const open = openMenuMessageIdx === messageIdx && openMenuAttachmentIdx === attachmentIdx && openMenuIdx === index;
                return (React.createElement(ActionSelect, { key: idx, menuId: idx, open: open, openUpwards: openMenuUpwards, onClick: this.toggleMessageMenu, cancelMessageMenu: cancelMessageMenu, action: action }));
            }
            if (action.confirm) {
                return React.createElement(ActionButtonWithConfirm, Object.assign({ key: idx, messageId: messageId }, action));
            }
            return React.createElement(ActionButton, Object.assign({ key: idx }, action));
        })));
    }
    toggleMessageMenu(menuId, confirm, triggers, e) {
        const openUpwards = this._actions.getBoundingClientRect().top - 200 > 200;
        // this.props.toggleMessageMenu(
        //   this.props.messageId,
        //   this.props.attachmentIdx,
        //   menuId,
        //   openUpwards,
        //   confirm,
        //   triggers,
        //   e
        // );
    }
    addTrigger(key, actionIdx, e) {
        // this.props.addTrigger(key, actionIdx, e);
    }
}
exports.default = Actions;
//# sourceMappingURL=Actions.js.map