import { createElement } from "../../functions";
import Grid from "../../ui/grid";
import { createPopup } from "../../ui/popup";
import { nullOrEmpty, r } from "../../utility";

class Follower {
    #option;

    constructor(option = {}) {
        this.#option = option;
    }

    async show(parent = document.body) {
        const gridContainer = createElement('div', 'follower-grid');
        const popup = createPopup(
            r('addFollowers', 'Add Followers'),
            createElement('div', 'follower-wrapper',
                createElement('div', div => div.innerText = r('whoWantReceiveCustomerNotification', 'Who do you want to receive customer notifications?')),
                createElement('input', search => {
                    search.className = 'ui-input follower-search';
                    search.addEventListener('input', () => {

                    });
                }),
                gridContainer
            ),
            { text: r('ok', 'OK'), key: 'ok' },
            { text: r('cancel', 'Cancel'), key: 'cancel' }
        );
        const result = await popup.show(parent);
        // grid
        const grid = new Grid(gridContainer);
        grid.columns = [
            { key: 'DisplayName', caption: r('contactName', 'Contact Name'), width: 240 },
            { key: 'ContactTypeName', caption: r('contactType', 'Contact Type'), width: 120 },
            {
                key: 'Text',
                caption: r('text', 'Text'),
                type: Grid.ColumnTypes.Checkbox,
                width: 60,
                enabled: item => !nullOrEmpty(item.Mobile)
            },
            {
                key: 'Email',
                caption: r('email', 'Email'),
                type: Grid.ColumnTypes.Checkbox,
                width: 70,
                enabled: item => !nullOrEmpty(item.ID)
            }
        ];
        grid.init();
        grid.source = this.#option.followers;
        return result;
    }
}

export default Follower;