/**
 * Created by TaoHuang on 2016/12/12.
 */

var Captcha = function(container, options) {
    var optionDefault = {
        template: require('hbs/common/captcha.hbs'),
        refreshURI: '/passport/imagesNode',
        checkURI: '/passport/captcha/img'
    };

    $.extend(this, optionDefault, options);

    this.$container = $(container);
    this.$imgPics = null;
    this.picWidth = null;
    this.$tip = null;
    this.refreshCb = null;
    this.running = false;

    return this;
};

Captcha.prototype = {
    init: function() {
        this.bindEvents();
        return this;
    },

    /**
     *  method: 绑定事件
     */
    bindEvents: function() {
        this.$container
            .on('click.refresh', '.img-check-refresh', $.proxy(this.refresh, this))
            .on('click.rotate', '.img-check-pic', $.proxy(this.rotateImg, this));

        return this;
    },

    /**
     *  method: 渲染 dom
     *  @param obj data 渲染数据
     *  {
     *      imgSrc: 'src'  //图片src
     *  }
     */
    render: function(data) {
        var self = this;

        this.$container.html(this.template(data));
        this.$imgPics = this.$container.find('.img-check-pic');
        this.$tip = this.$container.find('.img-check-tip');
        this.picWidth = this.$imgPics.width();

        this.$imgPics.each(function(index, elem) {
            var $elem = $(elem);
            var position = self.calcPosition($elem);

            $elem.css('backgroundPosition', position);
        });

        return this;
    },

    /**
     *  method: 计算 background-position
     *  @param num index img-check-pic 的index
     *  @param num count img-check-pic
     */
    calcPosition: function($elem) {
        var positionX, positionY;
        var index = $elem.index();
        var count = parseInt($elem.attr('data-val'), 10);
        var unit = 'px';

        count = count % 4;

        positionX = -index * this.picWidth + unit;
        positionY = -count * this.picWidth + unit;


        return [positionX, positionY].join(' ');
    },

    /**
     *  Handler method: 刷新验证码
     */
    refresh: function() {
        var self = this;
        var uri = this.refreshURI;

        if (self.running) {
            return $.Deferred().reject().promise(); // eslint-disable-line
        }

        self.running = true;

        return $.get(uri)
            .done(function(result) {
                if (result.code !== 200) {
                    return self.showTip();
                }

                var src = result.data.images; // eslint-disable-line

                self.render({
                    images: src
                });

                self.hideTip();

                self.refreshCb && self.refreshCb();
            })
            .always(function() {
                self.running = false;
            });
    },

    onRefresh: function(cb) {
        this.refreshCb = cb;
        return this;
    },

    /**
     * 检查是否正确
     */
    check: function() {
        var self = this;
        var uri = this.checkURI;

        if (self.getResults() === '0000') {
            self.showTip();
            return $.Deferred().reject().promise(); // eslint-disable-line
        }

        return $.post(uri, {
            verifyCode: self.getResults()
        }).then(function(result) {
            if (result.code === 200) {
                return $.Deferred().resolve().promise(); // eslint-disable-line
            } else {
                self.showTip(result.message);
                return $.Deferred().reject().promise(); //eslint-disable-line
            }
        });
    },


    /**
     * Handler method: 旋转图片
     */
    rotateImg: function(event) {
        var $pic = $(event.target);
        var prevRotateCount = parseInt($pic.attr('data-val'), 10);

        $pic.attr('data-val', prevRotateCount + 1);

        $pic.css({
            backgroundPosition: this.calcPosition($pic)
        });

    },

    /**
     * method: 获取结果
     * @return string '0123'
     */
    getResults: function() {
        var result = [];

        this.$container.find('.img-check-pic')
            .each(function() {
                var $elem = $(this);
                var val = $elem.attr('data-val');

                val = parseInt(val, 10);

                result.push(val % 4);
            });

        return result.join('');
    },

    /**
     *  显示错误
     */
    showTip: function(msg) {
        if (msg) {
            this.$tip.find('em').html(msg);
        } else {
            this.$tip.find('em').html('请将图形验证码翻转至正确方向');
        }

        if (this.$tip) {
            this.$tip.removeClass('hide');
        }
        return this;
    },

    /**
     * 隐藏错误
     */
    hideTip: function() {
        if (this.$tip) {
            this.$tip.addClass('hide');
        }
        return this;
    },

    show: function() {
        this.$container.removeClass('hide');
    },

    hide: function() {
        this.$container.addClass('hide');
    }
};

Captcha.prototype.construct = Captcha;


module.exports = Captcha;