<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/botui/0.3.9/botui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/botui/0.3.9/botui-theme-default.css">
<style>
    #chat-bot{
        position:fixed;
        z-index:99999;
        bottom:50px;
        right:80px;
        width:300px;
        height:500px;
        background-color:#fff;
        box-shadow:0px 2px 7px #aaa;
        padding-top:50px;
        overflow:scroll;
    }

    .chat-bot-title{
        position:absolute;
        top:0px;
        color:#fff;
        width:300px;
        height:40px;
        background-color:#73be1e;
        display:flex;
        align-items:center;
        padding-left:10px;
    }

    #chat-bot-textarea {
        position: absolute;
        bottom: 10px;
        right: 10px;
        left: 10px;
        width: 280px;
        height: 45px;
        background-color: #fff;
        outline: 0;
        padding-left: 15px;
        padding-right: 15px;
        color: #000;
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.5;
        border-radius:100px;
        border:1px solid #eee;
    }
</style>


<div id="chat-bot">
    <div class="chat-bot-title">Emploitic Chatbot</div>
    <bot-ui class="bot-ui"></bot-ui>
    <input autocomplete="off" type="text" id="chat-bot-textarea" placeholder="Ask your question, type here..." onclick>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/botui/0.3.9/botui.min.js"></script>
<script type="text/javascript">

    let faq_group = [
        {
            text:"What are your opening hours?",
            value:"hours",
            answer:"We're openning from 8h to 17h from Sunday to Thursday"
        },
        {
            text:"What are you services?",
            value:"services",
            answer:"We help candidates to find a job"
        },
        {
            text:"How to apply for an opportunity?",
            value:"apply",
            answer:"[Consult the link](https://www.youtube.com/watch?v=uzLdgTUz9Ms)"
        }

    ];

    let faq_groups = [
        {
            text:"group questions 1?",
            value:"group-1",
            actions:[
                {
                    text:"What are your opening hours?",
                    value:"hours",
                    answer:"We're openning from 8h to 17h from Sunday to Thursday"
                },
                {
                    text:"What are you services?",
                    value:"services",
                    answer:"We help candidates to find a job"
                },
                {
                    text:"How to apply for an opportunity?",
                    value:"apply",
                    answer:"[Consult the link](https://www.youtube.com/watch?v=uzLdgTUz9Ms)"
                }

            ]
        },
        {
            text:"group questions 2?",
            value:"group-2",
            actions:[
                {
                    text:"How to create a cv?",
                    value:"",
                    answer:"[Consult the link](https://www.youtube.com/watch?v=uzLdgTUz9Ms)"
                }

            ]
        }
    ]

    let addMessage = function(botui,message,delay=1000){
        return botui.message.add({
            type:"text",
            delay:delay,
            content: message
        })
    };

    let addAction = function(botui,question,faq_group){
        return addMessage(botui,question).then(function(){
            return botui.action.button({
                action:faq_group
            }).then(function(result){
                faq_group.forEach(element => {
                    if(element.value === result.value){
                        return addMessage(botui,element.answer);
                    }
                });
            })
        });
    }

    let addActionGroups = function(botui,question,faq_groups){
        return addMessage(botui,question).then(function(){
            return botui.action.button({
                action:faq_groups
            }).then(function(result){
                faq_groups.forEach(element => {
                    if(element.value === result.value){
                        return addAction(botui,"Choose a question?",element.actions);;
                    }
                });
            })
        });
    }


    var botui = new BotUI('chat-bot');

    addActionGroups(botui,"Choose a group of questions",faq_groups);
    //addAction(botui,"Do you have any questions?",faq_group);

    document.getElementById("chat-bot-textarea").addEventListener("keyup", event => {
        if(event.keyCode === 13){
            message = document.getElementById('chat-bot-textarea').value;
            addMessage(botui,message,0);
            document.getElementById('chat-bot-textarea').value = "";
        }
    });
</script>