function randomString(len = 8, charSet) {
    charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let output = '';
    for (let i = 0; i < len; i++) {
        let randomPoz = Math.floor(Math.random() * charSet.length);
        output += charSet.substring(randomPoz, randomPoz + 1);
    }
    return output;
}
function makeHiddenInput(value, name) {
    return `<input type="hidden" value="${value}" name="portfolio_data${name}">`;
}

$(document).ready(function () {
    class Form {
        constructor(container) {
            this.container = container;
            this.itemTemplate = {};
            this.items = {};
            this.tableHeader = [];
            this.activeItem = false;
        }
        init() {
            this.container.append('<div class="p-form__data-to-send"></div>');
            const self = this;
            let isDates = false;
            this.container.find('.form-input').each(function () {
                const $input = $(this).find('input, textarea');
                if (!$(this).hasClass('form-input--date')) {
                    self.tableHeader.push($input.attr('placeholder'));
                    if (!$input.attr('name')) {
                        throw 'input has no attribute "name"';
                    }
                    self.itemTemplate[$input.attr('name')] = '';
                } else if (!isDates) {
                    self.itemTemplate.dates = {};
                    isDates = true;
                    $('.form-input--date').each(function () {
                        let $in = $(this).find('input');
                        if (!$in.attr('name')) {
                            throw 'input has no attribute "name"';
                        }
                        self.itemTemplate.dates[$in.attr('name')] = '';
                    });
                }
            });
            if (isDates) {
                self.tableHeader.push('Dates');
            }
            if (window.preloadDataForForm) {
                this.items = Object.assign(this.items, window.preloadDataForForm);
                self.setActive(Object.keys(self.items)[0]);
            } else {
                this.addItem();
            }
        }
        update() {
            let template = '';
            let hiddenInputs = '';
            for (let i = 0; i < this.tableHeader.length; i++) {
                template += `<div class="form-table__col">${this.tableHeader[i]}</div>`;
            }
            this.container.find('.form-table__header').html(template);
            template = '';
            for (let i in this.items) {
                if (this.items.hasOwnProperty(i)) {
                    template += `<div class="form-table__row ${ i === this.activeItem ? 'form-table__row--active' : ''}" data-row-id="${i}">`;
                    for (let item in this.items[i]) {
                        if (this.items[i].hasOwnProperty(item)) {
                            if (item !== 'dates') {
                                template += `<div class="form-table__col">${this.items[i][item]}</div>`;
                                hiddenInputs += makeHiddenInput(this.items[i][item], `[${i}][${item}]`);
                            }
                        }
                    }
                    if (this.items[i].hasOwnProperty('dates')) {
                        let text = this.items[i].dates.hasOwnProperty('text') ? this.items[i].dates.text : '';
                        template += `<div class="form-table__col">${text}</div>`;
                        for (let date in this.items[i].dates) {
                            if (this.items[i].dates.hasOwnProperty(date)) {
                                if (date !== 'text') {
                                    hiddenInputs += makeHiddenInput(this.items[i].dates[date], `[${i}][${date}]`);
                                }
                            }
                        }
                    }
                    template += `<div class="form-table__buttons">
                                        <div class="form-table__buttons-item" data-action="edit"><span><i class="linear-pencil-line"></i>Edit</span></div>
                                        <div class="form-table__buttons-item" data-action="delete"><span><i class="linear-trash2"></i>Delete</span></div>
                                  </div>`;
                }
                template += '</div>';
            }
            this.container.find('.form-table__data').html(template);
            this.container.find('.p-form__data-to-send').html(hiddenInputs);
        }
        fieldChange($field) {
            const attr = $field.attr('name');
            if (!this.activeItem) {
                this.addItem();
            }
            if (this.activeItem) {
                if (!$field.parents('.form-input').hasClass('form-input--date')) {
                    this.items[this.activeItem][attr] = $field.val();
                } else {
                    let dates = '';
                    $('.form-input--date input').each(function () {
                        dates += $(this).val() + ' ';
                    });
                    this.items[this.activeItem].dates[attr] = $field.val();
                    this.items[this.activeItem].dates.text = dates;
                }
                this.update();
            }
        }
        addItem() {
            const id = randomString();
            this.activeItem = id;
            this.items[id] = Object.assign({}, this.itemTemplate);
            if (this.itemTemplate.hasOwnProperty('dates')) {
                this.items[id].dates = Object.assign({}, this.itemTemplate.dates);
            }
            this.container.find('.form-input').each(function () {
                $(this).find('input, textarea').val('');
            });
            this.update();
        }
        deleteItem(id) {
            delete this.items[id];
            this.activeItem = false;
            this.container.find('.form-input').each(function () {
                $(this).find('input, textarea').val('');
            });
            this.update();
        }
        setActive(id) {
            this.activeItem = id;
            const current = this.items[id];
            const self = this;
            $('.form-input input, .form-input textarea').val('');
            for (let i in current) {
                if (current.hasOwnProperty(i)) {
                    $(`[name="${i}"]`).val(current[i]);
                }
            }
            for (let i in current.dates) {
                if (current.dates.hasOwnProperty(i)) {
                    $(`[name="${i}"]`).val(current.dates[i]);
                }
            }
            self.update();
        }
    }
    const $formObject = $('.form-table').parents('.p-form');
    const form = new Form($formObject);

    form.container.find('.form-input input, .form-input textarea').on('keyup', function () {
        form.fieldChange($(this));
    });
    form.container.on('click', '.form-table__buttons-item', function () {
        const action = $(this).data('action');
        const id = $(this).parents('.form-table__row').data('row-id');
        if (action === 'edit') {
            form.setActive(id);
        } else if (action === 'delete') {
            form.deleteItem(id);
        }
    });
    $('[data-add-item]').click(function () {
        form.addItem();
    });
    $('input[data-dp-id]').each(function () {
        const field = $(this);
        $(this).datepicker({
            language: 'en',
            onSelect: function () {
                form.fieldChange(field);
            }
        });
        $(this).on('keyup keydown', function (e) {
            e.preventDefault();
        });
    });

    form.init();
});