var $ = require('yoho-jquery');
var common = require('../common');

var YohoListPage = {
    rootDoc: $('.yoho-product-list'),
    brandsDoc: $('.yoho-product-list .brand-list'),
    mulitBrand: false,
    goodsWrapper: $('.goods-area .goods-wrapper'),
    goodsWrapperState: false,
    init: function() {
        require('yoho-jquery-accordion');
        require('../plugins/check');
        $('.yoho-ui-accordion', this.rootDoc).each(function() {
            var opts = {
                collapsible: true,
                heightStyle: 'content'
            };

            if ($(this).hasClass('no-active')) {
                opts.active = false;
            }
            $(this).accordion(opts);
        });

        $('.yoho-product-list .sex-body .input-radio').check({
            type: 'radio',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    gender: checked ? value : ''
                });
            }
        });

        $('.yoho-product-list .list-body .input-radio').check({
            type: 'radio',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    sort: checked ? value : ''
                });
            }
        });

        $('.yoho-product-list .price-body .input-radio').check({
            type: 'radio',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    price: checked ? value : ''
                });
            }
        });

        $('.yoho-product-list .size-body .input-radio').check({
            type: 'radio',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    size: checked ? value : ''
                });
            }
        });

        $('.yoho-product-list .brand-list .input-radio').check({
            type: 'radio',
            onChange: function(ele, checked, value) {
                if (!YohoListPage.mulitBrand) {
                    YohoListPage.go({brand: value});
                } else {
                    YohoListPage.showBrandMulitBtn();
                }
            }
        });

        $('.yoho-product-list .color-body .input-radio').check({
            type: 'radio',
            onChange: function(ele, checked, value) {
                YohoListPage.go({
                    color: checked ? value : ''
                });
            }
        });

        YohoListPage.eventBind();
    },
    eventBind: function() {
        $('.yoho-product-list .mulit-choose').click(function() {
            YohoListPage.openBrandMulitChoose();
        });

        $('.yoho-product-list .brand-btns .cancel').click(function() {
            YohoListPage.closeBrandMulitChoose();
        });

        $('.yoho-product-list .brand-btns .confirm').click(function() {
            if (!$(this).hasClass('disable')) {
                YohoListPage.go({
                    brand: YohoListPage.getSelectBrands().join(',')
                });
            }
        });

        $('.yoho-product-list .brand-body input').on('keyup', function() {
            YohoListPage.filterBrand($(this).val().toLowerCase());
        });

        $('.yoho-product-list .brand-letter-items .item').hover(function() {
            $('.yoho-product-list .brand-letter-items .item').removeClass('select');
            $(this).addClass('select');
            YohoListPage.filterBrand($(this).data('value').toLowerCase());
        });

        $('.goods-area > .goods').mouseenter(function(e) {
            YohoListPage.showGoodsWrapper(e);
        });

        $('.goods-wrapper').mouseleave(function(e) {
            YohoListPage.hideGoodsWrapper(e);
        });

        $('.filter-area .filter-item').click(function() {
            var key = $(this).data('key');
            var data = {};

            data[key] = '';
            YohoListPage.go(data);
        });

        $('.filter-area .cancel').click(function() {
            var data = {};

            $('.filter-area .filter-item').each(function() {
                var key = $(this).data('key');

                data[key] = '';
            });

            YohoListPage.go(data);
        });
    },
    openBrandMulitChoose: function() {
        $('.yoho-product-list .mulit-choose').hide();
        YohoListPage.mulitBrand = true;
        YohoListPage.showBrandMulitBtn();
    },
    closeBrandMulitChoose: function() {
        $('.yoho-product-list .mulit-choose').show();
        $('.yoho-product-list .brand-btns').addClass('hide');

        $('.yoho-product-list .brand-list .input-radio').check('unCheckAll');
        YohoListPage.mulitBrand = false;
    },
    showBrandMulitBtn: function() {
        $('.brand-btns', this.rootDoc).removeClass('hide');
        if (YohoListPage.getSelectBrands().length > 0) {
            $('.brand-btns .confirm', this.rootDoc).removeClass('disable');
        } else {
            $('.brand-btns .confirm', this.rootDoc).addClass('disable');
        }
    },
    filterBrand: function(letter) {
        $('.yoho-product-list .brand-list .input-radio').each(function() {
            if ($('label', this).text().toLowerCase().indexOf(letter) === 0) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    },
    getSelectBrands: function() {
        let brands = [];

        $('.input-radio .radio', this.brandsDoc).each(function() {
            if ($(this).hasClass('checked')) {
                brands.push($(this).parent().data('value'));
            }
        });
        return brands;
    },
    showGoodsWrapper: function(e) {
        var position = $(e.currentTarget).position();
        var productId = $(e.currentTarget).data('id');

        if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
            YohoListPage.goodsWrapperState = false;
        }

        if (!YohoListPage.goodsWrapperState) {
            YohoListPage.productId = productId;
            position.top += 10;
            $(this.goodsWrapper).css(position);
            $('.goods', this.goodsWrapper).html($(e.currentTarget).html());
            $('.goods-img-list', this.goodsWrapper).empty();
            $(e.currentTarget).find('.goods-list i').each(function() {
                $('.goods-img-list', this.goodsWrapper).append(
                    '<img src="' + $(this).text() + '" width="60" height="80" alt="">');
            });
            $(this.goodsWrapper).show();
            YohoListPage.goodsWrapperState = true;

            $('.goods-img-list img', this.goodsWrapper).hover(function() {
                $('.goods .goods-img img', YohoListPage.goodsWrapper).attr('src', $(this).attr('src'));
            });
        }
    },
    hideGoodsWrapper: function() {
        YohoListPage.goodsWrapperState = false;
        $('.goods-area .goods-wrapper').hide();
    },

    go: function(q) {
        var qs = $.extend(common.queryString(), q);

        location.search = $.param(qs);
    }
};

YohoListPage.init();