;(function() {

    var METRIC_NAME = 'question_bar.lead-send';
    var START_DELAY = 2;

    var STEPS = {
        QUIZ: 1,
        CAPTURE: 2,
        SENDING: 3,
        CLARIFICATION: 4,
        COMPLETED: 5
    };

    var barComponent = {
        create: function(settings) {
            settings = settings || {};

            var barElement = document.querySelector(settings.selector);

            return {
                show: function() {
                    barElement && barElement.classList.add('show');
                },
                hide: function() {
                    barElement && barElement.classList.remove('show');
                }
            };
        }
    };

    var captureComponent = {
        create: function(settings) {
            settings = settings || {};

            var containerElement = document.querySelector(settings.selector);

            var onClose = settings.onClose;
            var onSend = settings.onSend;

            var modal = containerElement && new StdLib.ModalFacade(containerElement, {
                autoControl: false,
                onClose: onClose
            });

            var form = StdLib.cache('forms', 'exit');
            form && form.subscribe('send', function() {
                onSend && onSend();
            });

            var prevMetricName = '';

            return {
                show: function() {
                    if (modal) {
                        modal.open();

                        if (form && !prevMetricName) {
                            var element = form.form.getElement();
                            prevMetricName = element.getAttribute('data-metric');
                            element.setAttribute('data-metric', METRIC_NAME);
                        }
                    }
                },
                hide: function() {
                    if (modal) {
                        modal.close();

                        if (form && prevMetricName) {
                            form.form.getElement().setAttribute('data-metric', prevMetricName);
                        }
                    }
                },
                darken: function() {
                    modal && modal.darken();
                },
                light: function() {
                    modal && modal.light();
                }
            };
        }
    };

    var quizerComponent = {
        create: function(settings) {
            settings = settings || {};

            var onNext = settings.onNext;
            var onPrev = settings.onPrev;

            var quizerElement = document.querySelector(settings.selector);
            var nextControlsElements = quizerElement ? quizerElement.querySelectorAll('[data-control=next]') : [];
            var prevControlsElements = quizerElement ? quizerElement.querySelectorAll('[data-control=prev]') : [];
            var stepsElements = quizerElement ? quizerElement.querySelectorAll('[data-step]') : [];

            var currentStep = 0;
            var isAnimated = false;

            for (var i = 0; i < nextControlsElements.length; i++) {
                nextControlsElements[i].addEventListener('click', function(e) {
                    onNext && onNext(e);
                });
            }

            for (var i = 0; i < prevControlsElements.length; i++) {
                prevControlsElements[i].addEventListener('click', function(e) {
                    onPrev && onPrev(e);
                });
            }

            var currentStepElement = stepsElements[currentStep];

            return {
                next: function() {
                    if (isAnimated) {
                        return {
                            complete: false
                        };
                    }

                    if (!currentStepElement) {
                        return {
                            complete: true
                        };
                    }

                    currentStep++;

                    var nextStepElement = stepsElements[currentStep];

                    if (!nextStepElement) {
                        return {
                            complete: true
                        };
                    }

                    isAnimated = true;

                    var nextStepElementHeight = StdLib.element.demensions(nextStepElement).height;
                    var currentStepElementHeight = currentStepElement.offsetHeight;

                    StdLib.element.animate({
                        duration: 200,
                        timing: function(fraction) {
                            return Math.pow(fraction, 2);
                        },
                        draw: function(value) {
                            currentStepElement.style.height = (currentStepElementHeight - currentStepElementHeight * value) + 'px';
                            currentStepElement.style.opacity = 1 - value;
                        },
                        done: function() {
                            currentStepElement.style.display = 'none';
                            nextStepElement.style.display = 'block';
                            StdLib.element.animate({
                                duration: 300,
                                timing: function(fraction) {
                                    return Math.pow(fraction, 2);
                                },
                                draw: function(value) {
                                    nextStepElement.style.height = (nextStepElementHeight * value) + 'px';
                                    nextStepElement.style.opacity = value;
                                },
                                done: function() {
                                    isAnimated = false;
                                    currentStepElement = nextStepElement;
                                }
                            });
                        }
                    });

                    return {
                        complete: false
                    };
                }
            };
        }
    };

    var clarificationComponent = {
        create: function(settings) {
            settings = settings || {};

            var onBack = settings.onBack;
            var onClose = settings.onClose;

            var modalElement = document.querySelector(settings.selectors.modal);
            var overlayElement = document.querySelector(settings.selectors.overlay);
            var backControlElement = modalElement && modalElement.querySelector('[data-control=back]');
            var closeControlElement = modalElement && modalElement.querySelector('[data-control=close]');

            backControlElement && backControlElement.addEventListener('click', function(e) {
                onBack && onBack(e);
            });
            closeControlElement && closeControlElement.addEventListener('click', function(e) {
                onClose && onClose(e);
            });

            return {
                show: function() {
                    overlayElement && overlayElement.classList.add('show');
                },
                hide: function() {
                    overlayElement && overlayElement.classList.remove('show');
                }
            };
        }
    };

    var store = StdLib.store.create({
        step: STEPS.QUIZ
    });

    var actions = {
        clarification: {
            back: function() {
                store.setState({
                    step: STEPS.CAPTURE
                });
            },
            close: function() {
                store.setState({
                    step: STEPS.COMPLETED
                });
            }
        },
        quizer: {
            prev: function() {
                store.setState({
                    step: STEPS.COMPLETED
                });
            },
            next: function() {
                var complete = quizer.next().complete;
                complete && store.setState({
                    step: STEPS.CAPTURE
                });
            }
        },
        capture: {
            close: {
                [STEPS.CAPTURE]: function() {
                    store.setState({
                        step: STEPS.CLARIFICATION
                    });
                },
                [STEPS.SENDING]: function() {
                    store.setState({
                        step: STEPS.COMPLETED
                    });
                }
            },
            send: function() {
                store.setState({
                    step: STEPS.SENDING
                });
            }
        }
    };

    var subscribers = {
        [STEPS.QUIZ]: function(state) {
            bar.show();
        },
        [STEPS.CAPTURE]: function() {
            bar.hide();
            capture.show();
            capture.light();
            clarification.hide();
        },
        [STEPS.CLARIFICATION]: function() {
            bar.hide();
            capture.darken();
            clarification.show();
        },
        [STEPS.COMPLETED]: function(state) {
            bar.hide();
            capture.hide();
            capture.light();
            clarification.hide();
        }
    };

    var bar = barComponent.create({
        selector: '.js-floating-bar'
    });

    var quizer = quizerComponent.create({
        selector: '.js-simple-quizer',
        onPrev: function() {
            actions.quizer.prev();
        },
        onNext: function() {
            actions.quizer.next();
        }
    });

    var capture = captureComponent.create({
        selector: '#js-exit-intent-modal',
        onClose: function() {
            var action = actions.capture.close[store.getState().step];
            action && action();
        },
        onSend: function() {
            actions.capture.send();
        }
    });

    var clarification = clarificationComponent.create({
        selectors: {
            overlay: '.js-clarification-overlay',
            modal: '.js-clarification-modal'
        },
        onClose: function() {
            actions.clarification.close();
        },
        onBack: function() {
            actions.clarification.back();
        }
    });

    store.subscribe(function(state) {
        var subscriber = subscribers[state.step];
        subscriber && subscriber(state);
    });

    !localStorage.getItem('floatingBarWasShown') && setTimeout(function() {
        store.do();
        localStorage.setItem('floatingBarWasShown', 1);
    }, START_DELAY * 1000);

})();