import { Grid, createElement, Popup } from "../../ui";
import { nullOrEmpty, r as lang, contains } from "../../utility";

let r = lang;

export default class Follower {
    _var = {};

    constructor(option = {}) {
        this._var.option = option;
        const getText = option?.getText;
        if (typeof getText === 'function') {
            r = getText;
        }
    }

    async show(title, parent = document.body) {
        const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;

        const gridContainer = createElement('div', 'follower-grid');
        const popup = new Popup({
            onMasking: this._var.option.onMasking,
            title,
            content: createElement('div', 'follower-wrapper',
                createElement('div', div => div.innerText = r('P_CR_WHODOYOUWANTTORECEIVECUSTOMERNOTIFICATIONS', 'Who do you want to receive customer notifications?')),
                createElement('input', search => {
                    search.type = 'text';
                    search.tabIndex = tabIndex + 3;
                    search.className = 'ui-input follower-search';
                    search.addEventListener('input', () => {
                        const key = search.value;
                        if (nullOrEmpty(key)) {
                            this._var.grid.source = this._var.option.followers.sort(function (a, b) { return ((b.Text || b.Email) ? 1 : 0) - ((a.Text || a.Email) ? 1 : 0) });
                        } else {
                            this._var.grid.source = this._var.option.followers.filter(f => f.Text || f.Email || contains(f.DisplayName, key, true))
                                .sort(function (a, b) { return ((b.Text || b.Email) ? 1 : 0) - ((a.Text || a.Email) ? 1 : 0) });
                        }
                    });
                }),
                gridContainer
            ),
            buttons: [
                {
                    text: r('P_WO_OK', 'OK'),
                    key: 'ok',
                    trigger: () => {
                        if (typeof this._var.option.onOk === 'function') {
                            return this._var.option.onOk.call(this, this._var.grid.source.filter(f => f.Email || f.Text));
                        }
                    }
                },
                { text: r('P_WO_CANCEL', 'Cancel'), key: 'cancel' }
            ]
        });
        const result = await popup.show(parent);
        result.querySelector('.follower-search').focus();
        // grid
        const grid = new Grid(gridContainer);
        grid.columns = [
            { key: 'DisplayName', caption: r('P_WO_CONTACTNAME', 'Contact Name'), width: 240 },
            { key: 'ContactTypeName', caption: r('P_WO_CONTACTTYPE', 'Contact Type'), width: 120 },
            {
                key: 'Text',
                caption: r('P_CR_TEXT', 'Text'),
                type: Grid.ColumnTypes.Checkbox,
                width: 60,
                enabled: item => !nullOrEmpty(item.Mobile)
            },
            {
                key: 'Email',
                caption: r('P_CR_EMAIL', 'Email'),
                type: Grid.ColumnTypes.Checkbox,
                width: 70,
                // enabled: item => !nullOrEmpty(item.ID)
            }
        ];
        grid.init();
        grid.source = this._var.option.followers.sort(function (a, b) { return ((b.Text || b.Email) ? 1 : 0) - ((a.Text || a.Email) ? 1 : 0) });
        this._var.grid = grid;
        return result;
    }
}