let app = new Vue({
    el: '#app',
    data: {
        userNameToAdd: '',
        nameForList: '',
        followedAccounts: []
    },
    methods: {
        followAccount() {
            let userName = this.userNameToAdd;

            if (userName.length <= 0) {
                this.showToast('Username is needed.', 'red');
                return false;
            }

            this.followedAccounts.push({
                name: (this.nameForList.length > 0) ? this.nameForList : this.userNameToAdd,
                url: 'https://9gag.com/u/' + userName + '/',
                lastVisited: null
            });

            this.showToast(
                "You're now following " + this.getDisplayName(),
                'darkgreen'
            );

            this.userNameToAdd = '';
            this.nameForList = '';
            this.updateStorage();
        },
        visitAccount(account) {
            account.lastVisited = moment().format();
            window.open(account.url,'_blank');

            this.updateStorage();
            return true;
        },
        showToast(message, color = '') {
            iziToast.show({
                theme: 'dark',
                color: color,
                message: message,
                position: 'topCenter',
            });
        },
        getDiffForView(time) {
            return time ? 'last visited ' + moment(time).fromNow() : 'not yet visited';
        },
        updateStorage() {
            localStorage.setItem('followedAccounts', JSON.stringify(this.followedAccounts));
        },
        loadStorage() {
            let savedFollowedAccounts = JSON.parse(localStorage.getItem('followedAccounts'));
            this.followedAccounts = savedFollowedAccounts ? savedFollowedAccounts : [];
        },
        getDisplayName(nameForToast = this.nameForList, userNameToAdd = this.userNameToAdd) {
            return nameForToast = nameForList ? userNameToAdd + ' (' + userNameToAdd + ')' : userNameToAdd;
        },
        refreshAccountsAndOrder() {
            this.loadStorage();

            this.followedAccounts = this.followedAccounts.sort(function (a, b) {
                return new Date(b.lastVisited) - new Date(a.lastVisited)
            });
        },
        getRandomAvatarFrom9GAG() {
            let random = Math.floor(Math.random() * Math.floor(182));
            return 'https://accounts-cdn.9gag.com/avatar/default_' + random + '_100_v0.jpg';
        },
        unfollowAccount(account) {
            let app = this;

            iziToast.show({
                theme: 'dark',
                color: '#303030',
                message: 'Do you really want to unfollow ' + account.name + '?',
                position: 'center',
                buttons: [
                    ['<button>Yes</button>', function (instance, toast) {
                        account.deleted = true;
                        app.updateStorage();
                        instance.hide({
                            transitionOut: 'fadeOutUp',
                        }, toast, 'confirmUnfollow');
                    }, true], // true to focus
                    ['<button>Cancel</button>', function (instance, toast) {
                        instance.hide({
                            transitionOut: 'fadeOutUp',
                        }, toast, 'buttonName');
                    }]
                ]
            });
        }
    },
    mounted() {
        this.refreshAccountsAndOrder()
    }
})