import clippy from '../dist/index.js'

const ClippyDemo = (function() {
    const availableAgents = ['Bonzi', 'Clippy', 'F1', 'Genie', 'Genius', 'Links', 'Merlin', 'Peedy', 'Rocky', 'Rover']
    const talks = [
        'How can i help you?',
        'Nice day!',
        'Glad to meet you.',
        'At your service',
        'Helloo'
    ]

    function init() {
        this.$el = document.querySelector('.my-clippy')
    }

    function nextAgent() {
        let agentName = availableAgents[Math.floor(Math.random() * (availableAgents.length))]
        if (!agentName) return;

        clippy.load({
            name: agentName,
            selector: "my-clippy",
            successCb: agent => {
                window[agentName] = agent
                agent.show();

                // Speak on click and start
                const speak = () => {
                    agent.speak('I am ' + agentName + ', ' + talks[~~(Math.random() * talks.length)])
                    agent.animate()
                }
                agent._el.addEventListener('click', () => speak());
                speak()

                // Animate randomly
                setInterval(() => {
                    agent.animate()
                }, 3000 + (Math.random() * 4000))
            }
        });
    } 
    function destroy() {
        this.$el.innerHTML = ''
    }

    return {
        init,
        nextAgent,
        destroy,

    }
})();


window.onload = () => {
    ClippyDemo.init();
    ClippyDemo.nextAgent();
    document.getElementById('next-agent').addEventListener('click', () => {
        ClippyDemo.destroy();
        ClippyDemo.nextAgent();
    });
}