define(
    [
        'jquery',
        'ko',
        'uiComponent',
        'mage/translate'
    ],
    function( $, ko, Component) {
        'use strict';

        return Component.extend({

            initialize: function () {
                this._super();

                this.count = 2;
                this.removeValue = this.removeValue();
            },

            //  Temporary action url
            registerParticipant: function () {
                $.post(
                    this.registrationUrl
                );
            },

            values: ko.observableArray([{
                name: '',
                surname: '',
                email: '',
                legend: 'Participant' + ' ' + 1,
                nameAttr: 'name-attr' + '-' + 1,
                surnameAttr: 'surname-attr' + '-' + 1,
                emailAttr: 'email-attr' + '-' + 1}
            ]),

            addValue: function(){
                if(this.count <= 10) {
                    this.values.push({
                        name: '',
                        surname: '',
                        email: '',
                        legend: 'Participant'+ ' ' + this.count,
                        nameAttr: 'name-attr' + '-' + this.count,
                        surnameAttr: 'surname-attr' + '-' + this.count,
                        emailAttr: 'email-attr' + '-' + this.count
                    });
                } else {
                   $('#btnAdd').attr('disabled', 'disabled');
                }
                this.count += 1;
                console.log(this.count);
            },

            removeValue: function(){
                console.log(this);
                this.count -= 1;
            }
        });
    });