import AddMUCModal from 'plugins/muc-views/modals/add-muc.js';
import MUCListModal from 'plugins/muc-views/modals/muc-list.js';
import { __ } from 'i18n';
import { _converse, api } from "@converse/headless/core";
import { html } from "lit";


const bookmark = (o) => {
    const i18n_add_bookmark = __('Bookmark this groupchat');
    const i18n_remove_bookmark = __('Unbookmark this groupchat');
    if (o.bookmarked) {
        return html`
            <a class="list-item-action fa fa-bookmark remove-bookmark button-on"
               data-room-jid="${o.room.get('jid')}"
               data-bookmark-name="${o.room.getDisplayName()}"
               @click=${o.removeBookmark}
               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`;
    } else {
        return html`
            <a class="list-item-action fa fa-bookmark add-bookmark"
               data-room-jid="${o.room.get('jid')}"
               data-bookmark-name="${o.room.getDisplayName()}"
               @click=${o.addBookmark}
               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`;
    }
}


const unread_indicator = (o) => html`<span class="list-item-badge badge badge--muc msgs-indicator">${ o.room.get('num_unread') }</span>`;
const activity_indicator = () => html`<span class="list-item-badge badge badge--muc msgs-indicator"></span>`;


const room_item = (o) => {
    const i18n_leave_room = __('Leave this groupchat');
    const has_unread_msgs = o.room.get('num_unread_general') || o.room.get('has_activity');
    return html`
        <div class="list-item controlbox-padded available-chatroom d-flex flex-row ${ o.currently_open(o.room) ? 'open' : '' } ${ has_unread_msgs ? 'unread-msgs' : '' }"
            data-room-jid="${o.room.get('jid')}">

            ${ o.room.get('num_unread') ? unread_indicator(o) : (o.room.get('has_activity') ? activity_indicator(o) : '') }

            <a class="list-item-link open-room available-room w-100"
                data-room-jid="${o.room.get('jid')}"
                title="${__('Click to open this groupchat')}"
                @click=${o.openRoom}>${o.room.getDisplayName()}</a>

            ${ o.allow_bookmarks ? bookmark(o) : '' }

            <a class="list-item-action room-info fa fa-info-circle"
                data-room-jid="${o.room.get('jid')}"
                title="${__('Show more information on this groupchat')}"
                @click=${o.showRoomDetailsModal}></a>

            <a class="list-item-action fa fa-sign-out-alt close-room"
                data-room-jid="${o.room.get('jid')}"
                data-room-name="${o.room.getDisplayName()}"
                title="${i18n_leave_room}"
                @click=${o.closeRoom}></a>
        </div>`;
}

export default (o) => {
    const i18n_desc_rooms = __('Click to toggle the list of open groupchats');
    const i18n_heading_chatrooms = __('Groupchats');
    const i18n_title_list_rooms = __('Query for groupchats');
    const i18n_title_new_room = __('Add a new groupchat');
    return html`
        <div class="d-flex controlbox-padded">
            <span class="w-100 controlbox-heading controlbox-heading--groupchats">${i18n_heading_chatrooms}</span>
            <a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul"
                @click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)}
                title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal"></a>
            <a class="controlbox-heading__btn show-add-muc-modal fa fa-plus"
                @click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)}
                title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
        </div>

        <div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
            <a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
            <span class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span> ${__('Open Groupchats')}</a>
            <div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
                ${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
            </div>
        </div>`;
}