const createReactClass = window.p5VendorJs.createReactClass;
const h = window.p5VendorJs.React.createElement;
const ReactDOM = window.p5VendorJs.ReactDOM;
const AsyncTypeahead = window.p5VendorJs.AsyncTypeahead;
const swal = window.swal;
const DBG = 1;


var P5UI_AddItemToReport_BazaMenuItem = createReactClass({
    // this.props: { key: option.ID, baza: selectedBaza, data: option }
    render: function () {
        return h('div', {}, this.props.data.label);
    }
})

var P5UI_AddItemToReport = createReactClass({
    getInitialState: function () {
        return {
            baza: null,
            newItemBaza: null,
            isSearching: false,
            selected: null,
        };
    },
    _handleSelectBaza: function (baza) {
        this.setState({ baza: baza, newItemBaza: null });
    },
    _handleSelectNewItem: function (baza) {
        this.setState({ baza: null, newItemBaza: baza });
    },
    _handleSelected: function (selected) {
        this.setState({ selected: (selected.length > 0) ? selected[0] : null });
    },
    _handleSearch: function (query) {
        this.setState({ isSearching: true });
        var _setState = this.setState.bind(this);
        var baza = this.state.baza;
        var options= [];
        window.fetch(URL_FETCH_FROM_BAZA, {
					method: 'POST',
					header: {
						'contentType': 'applications/json'
					},
					credentials: 'same-origin',
					body: JSON.stringify({
						baza: baza,
            query: query,
					})
				})
        .then(function(response) {
          return response.text();
        })
        .then(function(responseText) {
					try {
						return JSON.parse(responseText);
					} catch (e) {
						throw responseText;
					}
				})
				.then(function(result) {
					if (result.type == 'success') {
						p5UI__notifyAjaxCallback(result);
            if (result.body && result.body.items && result.body.items.length > 0) {
              return result.body.items;
            } else {
              p5UI__notifyAjaxCallback({ type: 'warning', msg: "Brak danych pasujących do kryteriów wyszukiwania" });
            }
					}
				})
        .then(function(items) {
          DBG && console.log('items fetched:', items);
          _setState({ isSearching: false, options: items });
        })
        .catch(function(error) {
          DBG && console.log('request failed', error);
        })
    },
    componentWillUnmount: function () {
        DBG && console.log("DBG: conponentDidUnmount...");
    },
    shouldComponentUpdate: function (nextProps, nextState) {
      DBG && console.log("DBG: shouldComponentUpdate...", { nextProps, nextState });
      return true;
    },
    render: function () {
        // '<div>' +
        //   '<p style="text-align:center">' + 'Wybierz bazę' + '</p>' +
        //   '<div>' + .join(' ') + '</div>' +
        //   +
        //   '</div>',

        var bazaBtns = [];
        bazaBtns.push({ baza: "default_db/BI_audit_KRS/BI_audit_KRS", title: "KRS - Firmy", label: "KRS" });
        bazaBtns.push({ baza: "default_db/BI_audit_KRS_person/BI_audit_KRS_person", title: "KRS - Osoby", label: "KRS/p" });
        bazaBtns.push({ baza: "default_db/BI_audit_MSIG/BI_audit_MSIG", title: "MSIG - Firmy", label: "MSIG" });
        bazaBtns.push({ baza: "default_db/BI_audit_MSIG_person/BI_audit_MSIG_person", title: "KRS - Osoby", label: "MSIG/p" });
        bazaBtns.push({ baza: "default_db/BI_audit_taxpayer/BI_audit_taxpayer", title: "VAT - Aktywni płatnicy", label: "VATp" });
        bazaBtns.push({ baza: "default_db/BI_audit_CEIDG/BI_audit_CEIDG", title: "CEIDG", label: "CEIDG" });
        // bazaBtns.push({ baza: "default_db/BI_audit_ENERGA_RUM_UMOWY/BI_audit_ENERGA_RUM_UMOWY", title: "RUM Umowy", label: "RUM/u" });
        // bazaBtns.push({ baza: "default_db/BI_audit_ENERGA_RUM_KONTRAHENCI/BI_audit_ENERGA_RUM_KONTRAHENCI", title: "RUM Kontrahenci", label: "RUM/k" });
        // bazaBtns.push({ baza: "default_db/BI_audit_ENERGA_FAKTURY/BI_audit_ENERGA_FAKTURY", title: "Faktury - do imoportowania", label: "Faktury" });
        var newItemBtns = [];
        newItemBtns.push({ baza: "default_db/BI_audit_ENERGA_PRACOWNICY/BI_audit_ENERGA_PRACOWNICY", title: "Nowa osoba", label: "Nowa osoba" });
        newItemBtns.push({ baza: "default_db/BI_audit_ENERGA_RUM_KONTRAHENCI/BI_audit_ENERGA_RUM_KONTRAHENCI", title: "Nowy podmiot", label: "Nowy podmiot" });

        function generateBazaBtn(btn, opts) {
            return h('button', {
                title: btn.title,
                className: "btn btn-success" + (opts.selected ? " active" : ""),
                style: { margin: "3px" },
                onClick: function () {
                    opts.onClick(btn.baza)
                },
            }, btn.label)
        }

        function generateNewItemBtn(btn, opts) {
            return h('button', {
                title: btn.title,
                className: "btn btn-success" + (opts.selected ? " active" : ""),
                style: { margin: "3px" },
                onClick: function () {
                    opts.onClick(btn.baza)
                },
            }, btn.label)
        }

        var handleSelectBaza = this._handleSelectBaza.bind(this);
        var handleSelectNewItem = this._handleSelectNewItem.bind(this);
        var selectedBaza = this.state.baza;
        var selectedNewItem = this.state.newItemBaza;
        var selectedLabel = '';
        if (selectedBaza) {
            var selBazaBtn = bazaBtns.filter(function (btn) { return btn.baza === selectedBaza; })
            if (selBazaBtn) {
                selBazaBtn[0].title
            }
        }
        var handleSearch = this._handleSearch.bind(this);
        var handleSelected = this._handleSelected.bind(this);
        DBG && console.log('DBG: render this.state.options', this.state.options);
        return h('div', {}, [
            h('p', { style: { textAlign: "center" } }, "Wybierz bazę"),
            h('div', { style: { marginBottom: '22px' } },
                bazaBtns.map(function (btn) {
                    return generateBazaBtn(btn, {
                        onClick: handleSelectBaza,
                        selected: (selectedBaza === btn.baza),
                    });
                }).concat(
                    newItemBtns.map(function (btn) {
                        return generateNewItemBtn(btn, {
                            onClick: handleSelectNewItem,
                            selected: (selectedNewItem === btn.baza),
                        });
                    })
                )
            ),
            selectedBaza && h(AsyncTypeahead, {
                isLoading: this.state.isSearching,
                allowNew: false,
                multiple: false,
                options: this.state.options,
                // labelKey: "searchLabel",
                labelKey: function (option) {
                  return [
                    option.nazwa.replace('"', ''),
                    option.nip,
                    option.krs,
                    option.regon,
                    option.S_miejscowosc,
                  ].join(' ')
                },
                minLength: 3,
                onSearch: handleSearch,
                placeholder: "Wyszukaj...",
                onChange: handleSelected,
                autoFocus: true,
                filterBy: function (option, text) {
                  console.log('TODO: filterBy...', {option, text});
                  return true;
                },
                renderMenuItemChildren: function (option, props) {
                    return h(P5UI_AddItemToReport_BazaMenuItem, { key: option.ID, baza: selectedBaza, data: option });
                }
            }),
            (selectedNewItem==="default_db/BI_audit_ENERGA_PRACOWNICY/BI_audit_ENERGA_PRACOWNICY") && h('div', { className: 'form-group' }, [
              h('input',{
                className:'form-control required',
                id:'personName',
                placeholder:'Imię'
              }),
              h('input',{
                className:'form-control required',
                id:'personSurname',
                placeholder:'Nazwisko'
              }),
              h('input',{
                className:'form-control required',
                id:'personPesel',
                placeholder:'Pesel'
              }),
              h('input',{
                className:'form-control required',
                id:'personNip',
                placeholder:'NIP'
              })
            ]),
            (selectedNewItem==="default_db/BI_audit_ENERGA_RUM_KONTRAHENCI/BI_audit_ENERGA_RUM_KONTRAHENCI") && h('div', { className: 'form-group' }, [
              h('input',{
                className:'form-control required',
                id:'companyName',
                placeholder:'Nazwa'
              }),
              h('input',{
                className:'form-control required',
                id:'comapanyRegon',
                placeholder:'REGON'
              }),
              h('input',{
                className:'form-control required',
                id:'companyNip',
                placeholder:'NIP'
              })
            ]),
            // '' === selectedNewItem && h
            (selectedBaza && this.state.selected) && h('div', { style: { marginTop: '22px' } }, [
                h('button', {
                    className: "btn btn-success active",
                    onClick: function () {
                        this.props.onSelect(this.state.baza, this.state.selected);
                        ReactDOM.unmountComponentAtNode(document.getElementById('createPracownikAjax__searchBaza'));
                        swal.close()
                    }
                }, "Dodaj")
            ])
        ])
    }
})

function getWindowWidth() {
    var w = window, d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0];
    return w.innerWidth || e.clientWidth || g.clientWidth;
}

function createPracownikAjax(event) {
    // default_db/BI_audit_KRS/BI_audit_KRS
    // default_db/BI_audit_KRS_person/BI_audit_KRS_person
    // default_db/BI_audit_MSIG/BI_audit_MSIG
    // default_db/BI_audit_MSIG_person/BI_audit_MSIG_person
    // default_db/BI_audit_taxpayer/BI_audit_taxpayer
    // default_db/BI_audit_CEIDG/BI_audit_CEIDG
    // default_db/BI_audit_ENERGA_RUM_UMOWY/BI_audit_ENERGA_RUM_UMOWY
    // default_db/BI_audit_ENERGA_RUM_KONTRAHENCI/BI_audit_ENERGA_RUM_KONTRAHENCI
    // default_db/BI_audit_ENERGA_FAKTURY/BI_audit_ENERGA_FAKTURY

    swal({
        title: "Dodaj osobę lub podmiot",
        width: (getWindowWidth() * 0.8),
        html: '<div id="createPracownikAjax__searchBaza" style="padding:0 24px 24px 24px; min-height:400px"></div>',
        animation: false,
        showConfirmButton: false,
        showCancelButton: false,
        showCloseButton: true,
        onOpen: function () {
            ReactDOM.render(
                h(P5UI_AddItemToReport, {
                    onSelect: function (baza, selected) {
                        //insert do tabeli BI_audit_ENERGA_PRACOWNICY
                        console.log('TODO: selected ', { baza, selected });
                    }
                }),
                document.getElementById('createPracownikAjax__searchBaza')
            )
        }
    }).catch(function (err) {
        DBG && console.log('err', err)
    })
}

global.createPracownikAjax = createPracownikAjax;
// module.exports = {
//     P5UI_AddItemToReport_BazaMenuItem,
//     P5UI_AddItemToReport,
//     createPracownikAjax
// }