let kara = new Vue({
    el: '#kara',
    data: {
        messages: [],
        name: 'Kara',
        chatbox: null,
        isTyping: false,
        templates: {
            initialGreeting: "Hi! I'm Kara. :)"
        }
    },
    mounted() {
        this.initialGreeting();
        document.getElementById('chatinput').focus();
    },
    methods: {
        addMessage(body, ai) {
            this.messages.push({
                body: body,
                ai: ai,
                time: Date.now()
            })
        },
        aiMessage(body) {
            this.addMessage(body, true);
        },
        userMessage(body) {
            this.addMessage(body, false);
        },
        initialGreeting() {
            this.aiMessage(this.templates.initialGreeting);
        },
        sendMessage() {
            this.userMessage(this.chatbox);
            this.react(this.chatbox);
            this.chatbox = '';
        },
        react(message) {
            this.isTyping = true;

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

            setTimeout(() => {
            	this.aiMessage(
            		this.getAnswer(message)
        		);
            }, 3000);

            this.scrollDown();
        },
        getAnswer(message) {
            let isQuestion = (message.indexOf('?') > 0);

            message = message.toLowerCase();
            message = this.clearMessage(message);
            let phrases = message.split(' ');

            

            if (isQuestion) {
                return 'This is a question!';
            } else {
            	if (message.indexOf('name') > 0) {
            		return 'Nice to meet you!';
            	} else {
            		return "I don't know what to say.";
            	}
            }

            return answer;
        },
        scrollDown() {
            $('#chat-box').stop().animate({
                scrollTop: $('#chat-box')[0].scrollHeight
            }, 800);
        },
        clearMessage(message) {
            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('…', '');
        }
    }
})