let kara = new Vue({
    el: '#kara',
    data: {
        messages: [],
        name: 'Kara',
        chatbox: null,
        isTyping: false,
        addModal: {
            includeAll: false,
            keywords: '',
            responses: [
                'Answer #1'
            ]
        },
        answers: [
            {
                includeAll: false,
                keywords: [
                    'hi', 'hallo', 'servas', 'servus', 'hello'
                ],
                responses: [
                    'Hey! :)',
                    'Hello!',
                    'How are you?'
                ]
            },
            {
                includeAll: true,
                keywords: [
                    'how', 'are', 'you'
                ],
                responses: [
                    'I\'m good! Thanks for asking! :) How about you?',
                    'A bit tired from trying to do that think called "thinking".. i\'ll figure it out one day.',
                    'Wooo! I\'m hyped for party! You\'re in?'
                ]
            }
        ]
    },
    mounted() {
        if (this.getSavedData() === false) {
            this.initialGreeting();
            // Todo: add method to ask for and save username
        } else {
            this.welcomeBack();
        }

        document.getElementById('chatinput').focus();
        document.title = this.name;
    },
    methods: {
        addMessage(body, ai) {
            this.messages.push({
                body: body,
                ai: ai,
                time: Date.now()
            })

            this.updateStorage();
        },
        aiMessage(body) {
            this.addMessage(body, true);

            this.updateStorage();
        },
        userMessage(body) {
            this.addMessage(body, false);

            this.updateStorage();
        },
        initialGreeting() {
            this.aiMessage(
                this.oneOf(
                    [
                        "Hi! I'm " + this.name + ". :)",
                        "Hi, nice to meet you! My name is " + this.name + ". :)"
                    ]
                )
            );

            this.updateStorage();
        },
        welcomeBack() {
            this.aiMessage(
                this.oneOf(
                    [
                        "Hi! Haven't heard of you in a while. :)",
                        "Welcome back! :)",
                        "Hey :) Good to see you :)",
                    ]
                )
            );

            this.updateStorage();
        },
        sendMessage() {
            if (this.chatbox.trim() === '') {
                return false;
            }

            this.userMessage(this.chatbox);
            this.scrollDown();
            this.react(this.chatbox);
            this.chatbox = '';

            this.updateStorage();
        },
        react(message) {
            this.isTyping = true;

            setTimeout(() => {
                this.isTyping = false;
                document.getElementById('chatinput').focus();
            }, 2500);

            setTimeout(() => {
                let answer = this.getAnswer(message);
                console.log(answer);

                this.aiMessage(answer);
                this.scrollDown();
            }, 3000);
        },
        scrollDown() {
            $('#chat-box').stop().animate({
                scrollTop: $('#chat-box')[0].scrollHeight
            }, 800);

            this.updateStorage();
        },
        oneOf(answers) {
            let amountOfAnswers = answers.length;
            let randomIndex = Math.floor(Math.random() * (amountOfAnswers));
            console.log(randomIndex);

            console.log(answers[randomIndex]);
            return answers[randomIndex];
        },
        includesOneOf(phrases, wordsToSearch) {
            let includes = false;

            wordsToSearch.forEach((searchWord) => {
                if (phrases.includes(searchWord)) {
                    includes = true;
                }
            })

            return includes;
        },
        includesAllOf(phrases, wordsToSearch) {
            let includesAllPhrases = true;

            wordsToSearch.forEach((searchWord) => {
                if (!phrases.includes(searchWord)) {
                    includesAllPhrases = false;
                }
            })

            return includesAllPhrases;
        },
        cleanupMessage(message) {
            message = message.toLowerCase();
            return message.replace('?', '')
                .replace('!', '')
                .replace('.', '')
                .replace(',', '')
                .replace('-', '')
                .replace('_', '')
                .replace('#', '')
                .replace('\'', '')
                .replace('"', '')
                .replace('+', '')
                .replace('*', '')
                .replace('§', '')
                .replace('$', '')
                .replace('%', '')
                .replace('&', '')
                .replace('/', '')
                .replace('(', '')
                .replace(')', '')
                .replace('=', '')
                .replace('\\', '')
                .replace('@', '')
                .replace('~', '')
                .replace('…', '');
        },
        getAnswer(message) {
            message = this.cleanupMessage(message);
            let phrases = message.split(' ');
            let answer = undefined;

            this.answers.forEach((answerOption) => {
                if (answerOption.includeAll === true) {
                    if (
                        this.includesAllOf(phrases, answerOption.keywords)
                    ) {
                        answer = this.oneOf(answerOption.responses);
                    }
                } else {
                    if (
                        this.includesOneOf(phrases, answerOption.keywords)
                    ) {
                        answer = this.oneOf(answerOption.responses);
                    }
                }
            });

            if (answer) {
                return answer;
            }

            return 'I don\'t know what to say..';
        },
        addResponseToInput() {
            this.addModal.responses.push('');
        },
        addNewResponseContainer() {
            let includeAll = this.addModal.includeAll;
            let keywords = this.cleanupMessage(this.addModal.keywords).split(',');
            let responses = this.addModal.responses;
            console.log(this.addModal.responses);

            this.answers.push({
                includeAll: includeAll,
                keywords: keywords,
                responses: responses
            });

            this.addModal.includeAll = false;
            this.addModal.keywords = '';
            this.addModal.responses = [''];

            this.updateStorage();
        },
        updateStorage() {
            localStorage.setItem('name', this.name);
            localStorage.setItem('messages', JSON.stringify(this.messages));
            localStorage.setItem('answers', JSON.stringify(this.answers));
        },
        getSavedData() {
            let savedName = localStorage.getItem('name')

            if (savedName === '') {
                return false;
            }

            this.name = localStorage.getItem('name');

            let savedMessages = JSON.parse(localStorage.getItem('messages'));
            this.messages = savedMessages ? savedMessages : [];

            let savedAnswers = JSON.parse(localStorage.getItem('answers'));
            this.answers = savedAnswers ? savedAnswers : this.answers;

            this.scrollDown();
        }
    }
})