angular.module('footyroom').component('banWizard', {
    template: /* html */`
        <div fr-litelay="$ctrl.isSaving || $ctrl.isLoading">
            <div class="modal-body">
                <div ng-if="!$ctrl.isLoading">
                    <div ng-if="!$ctrl.isRequestingPermaban">
                        <div ng-if="$ctrl.warning" ng-bind-html="$ctrl.warning"></div>
                        
                        <span>Ban this user from commenting for </span>
                        <select class="ban-duration" ng-model="$ctrl.duration" ng-change="onDurationChange()">
                            <option value="600">10 minutes</option>
                            <option value="3600">1 hour</option>
                            <option value="36000">10 hours</option>
                            <option value="86400">1 day</option>
                            <option value="172800">2 days</option>
                            <option value="604800">1 week</option>
                            <option value="2592000">1 month</option>
                        </select>
                    </div>

                    <div ng-if="$ctrl.isRequestingPermaban">
                        <textarea ng-model="$ctrl.explanation" class="form-control" rows="10" placeholder="Please give some explanation why you think this user deserves a permanent ban"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="pull-left">
                    <button ng-click="$ctrl.isRequestingPermaban = true" ng-if="!$ctrl.isRequestingPermaban" class="btn btn-default">Request Permaban</button>
                    <button ng-click="$ctrl.isRequestingPermaban = false" ng-if="$ctrl.isRequestingPermaban" class="btn btn-default">Ban Temporarily</button>
                </div>
                <div class="pull-right">
                    <button class="btn btn-default" ng-click="$ctrl.dismiss()">Cancel</button>
                    <button class="btn btn-primary" ng-click="$ctrl.ban()" ng-if="!$ctrl.isRequestingPermaban">Ban</button>
                    <button class="btn btn-primary" ng-click="$ctrl.permaban()" ng-if="$ctrl.isRequestingPermaban">Send Request</button>
                </div>
            </div>
        </div>
    `,
    bindings: {
        userId: '<',
        dismiss: '&',
    },
    /**
     * @param {ng.IHttpService} $http
     * @param {ng.ISCEService} $sce
     */
    controller: ['$http', '$sce', function ($http, $sce) {
        const vm = this;

        vm.ban = ban;
        vm.permaban = permaban;
        vm.duration = '600';
        vm.isLoading = true;

        $http.get('/bans/active-pagelet', { params: { userId: vm.userId, type: 'comment' } })
            .then((response) => {
                vm.warning = $sce.trustAsHtml(response.data);
            })
            .finally(() => {
                vm.isLoading = false;
            });

        function ban() {
            confirm('/bans', {
                entity: 'user_id',
                value: vm.userId,
                type: 'comment',
                duration: vm.duration,
            });
        }

        function permaban() {
            confirm('/bans/request-permaban', {
                userId: vm.userId,
                explanation: vm.explanation,
            });
        }

        function confirm(action, data) {
            vm.isSaving = true;

            return $http.post(action, data)
                .then(() => vm.dismiss())
                .catch((response) => { alert(response.data.errors); })
                .finally(() => {
                    vm.isSaving = false;
                });
        }
    }],
});