const ActivityListComponent = {
    templateUrl: "/app/activityList/activityList.component.html",
    controller: function (api, $state) {

        let $ctrl = this;
        $ctrl.completed = [];
        $ctrl.activities = [];

        getActivities = function () {
            return api.getActivities().then(function (response) {
                $ctrl.activities = response.data;
            });
        }

        getProgress = function () {
            return api.getProgress().then(function (response) {
                $ctrl.completed = response.data;
            });
        }

        $ctrl.$onInit = function () {
            getActivities().then(function () {
                getProgress().then(function () {
                    //adds a new attribute, complete, to $ctrl.activities
                    //complete is true if users logged in have completed that activity
                    for (var i = 0; i < $ctrl.activities.length; i++) {
                        var activityId = $ctrl.activities[i].id;
                        if($ctrl.completed.includes(activityId)) {
                            $ctrl.activities[i].complete = true;
                        } else {
                            $ctrl.activities[i].complete = false; 
                        }
                    }
                    //console.log($ctrl.activities);              
                });
            });
        }

        $ctrl.goToActivities = function () {
            //$state.go('activity');
            $state.go('activity', {}, { reload: true });
        }

    }
};