var prodListService = (function () {
    var prodList = [];
    return {
        appendToProdList: function (_prodList) {
            preprocess(_prodList);
            prodList = _.concat(prodList, _prodList);

            function preprocess(_prodList) {
                _.forEach(_prodList, function (prod) {
                    prod.rcmdNo = _.isNumber(prod.rcmdNo) ? prod.rcmdNo : 0;
                    prod.like = _.isBoolean(prod.like) ? prod.like : prod.like === "true";
                    prod.likeRootId = 'like_' + prod.prodId;
                })
            }
        },
        findProdListByProdId: function (prodId) {
            return _.filter(prodList, {'prodId': _.toNumber(prodId)})[0];
        },
        toggleLike: function (prod) {
            prod.like = !prod.like;
            if (prod.like) {
                prod.rcmdNo++;
            } else {
                prod.rcmdNo--;
            }
        },
    }
}());

prodListService.apiModule = function () {
    var that = this;
    var prodListSearchOption = {
        start: 0,
        length: 16,
        pagingYn: true,
        prodNmLike: null,
        prodTyArray: null,
        skTyCus: null,
        skTy: null,
        sortOrd: 'DESC',
        sort: 'REG_DT'
    }
    var sortToken = "";
    var mSideBar = "";
    var isExistNextPaging = true;
    return {
        prodListPageRequest: function () {
            location.href = "/clfd/prod/list.do" +
                "?searchText=" + prodListSearchOption.prodNmLike
                + getArrayQueryString(prodListSearchOption.prodTyArray, 'prodTyArray')
                + (prodListSearchOption.skTyCus === null ? "" : "&skTyCus=" + prodListSearchOption.skTyCus)
                + (prodListSearchOption.skTy === null ? "" : "&skTy=" + prodListSearchOption.skTy)
                + (sortToken === "" ? "" : "&sortToken=" + sortToken)
                + (mSideBar === "" ? "" : "&mSideBar=" + mSideBar);

            function getArrayQueryString(targetArray, queryName) {
                if (!targetArray || targetArray.length < 1) {
                    return "";
                }
                var arrayQueryString = "";
                for (var i = 0; i < targetArray.length; i++) {
                    var prodTy = targetArray[i];
                    arrayQueryString += "&" + queryName + "=" + prodTy;
                }
                return arrayQueryString;
            }
        },
        prodListApiRequest: function (option) {
            $.ajax({
                url: "/clfd/prod/list.json?" + $.now(),
                data: prodListSearchOption,
                type: "GET",
                success: function (res) {
                    if (res.result === "success") {
                        that.appendToProdList(res.prodList);
                        prodListSearchOption.start = prodListSearchOption.start + res.prodList.length;
                        if (res.prodList.length < 12) {
                            isExistNextPaging = false;
                        }
                        if (option && option.scb) {
                            option.scb(res);
                        }
                    } else {
                        if (option && option.ecb) {
                            option.ecb(res);
                        }
                    }
                }
            });
        },
        isProdListZero: function () {
            return prodListSearchOption.start === 0;
        },
        isExistNextPaging: function () {
            return isExistNextPaging;
        },
        setSearchText: function (searchText) {
            prodListSearchOption.prodNmLike = searchText;
        },
        setProdTyArray: function (prodTyArray) {
            prodListSearchOption.prodTyArray = prodTyArray;
        },
        setSkTyCus: function (skTyCus) {
            prodListSearchOption.skTyCus = skTyCus;
        },
        setSkTy: function (skTy) {
            prodListSearchOption.skTy = skTy;
        },
        setSort: function (sort, sortOrd) {
            if (sort) {
                prodListSearchOption.sort = sort;
            }
            if (sortOrd) {
                prodListSearchOption.sortOrd = sortOrd;
            }
        },
        setSortToken: function (token) {
            sortToken = token;
        },
        setMsideBarToOn: function () {
            let height = Math.max($('.product__container').height(), $('.sidebar__menu').height());
            $('.sidebar__menu').height(height +'px');
            $('.m__filterbtn_black').height(height +'px');
            $('.sidebar__menu').addClass("active");
            $('.m__filterbtn_black').addClass("active");
            mSideBar = "on";
        },
        setMsideBarToOff: function () {
            $('.sidebar__menu').removeClass("active");
            $('.m__filterbtn_black').removeClass("active");
            mSideBar = "";
        }
    }
};

prodListService.viewModule = function () {
    return {
        appendProdList: function ($prodRootDiv, prodList) {
            if (!$prodRootDiv || !prodList || prodList.length === 0) {
                return;
            }
            for (var i = 0; i < prodList.length; i++) {
                var prod = prodList[i];
                var $card = this.getProdCard(prod);
                $prodRootDiv.append($card);
            }
        },
        getProdCard: function (prod) {
            var $cardAnchor = $("<a href='/clfd/prod/dtl.do?prod=" + prod.prodId + "' style='width: 100%; text-align: center;'></a>");
            var $card = $("<div class='cardbarIn__item'></div>");
            var $divImg = $("<div class='cardbarIn__divImg'></div>")
            var $img = $("<img src='/clfd/image/" + prod.imageDir + "_" + prod.prodImage + "' alt=''>");
            var $cardContents = $("<div class='card__contents' style='text-align: left'></div>");
            var $bText = $("<a class='b__text'>" + prod.prodNm + "</a>");
            var $wText = $("<div><a class='w__text'>" + prod.prodCpcty + "ml / " + clfdUtils.formattingDot(prod.prodPrc) + "원</a></div>");

            var $likeRoot = $("<div style='padding: 8px 12px; float: left;' id='" + prod.likeRootId + "' class='like__icon' data-prodId='" + prod.prodId + "'></div><br>");
            this.drawLikeView($likeRoot, prod);

            $divImg.append($img);
            $cardAnchor.append($divImg);
            $cardContents.append($bText);
            $cardContents.append($wText);
            $cardAnchor.append($cardContents);
            $cardAnchor.append($likeRoot);
            $card.append($cardAnchor);
            return $card;
        },
        appendProdListZeroAlert: function ($prodCardRoot) {
            var $card = $("<div class='cardbarIn__item' style='visibility: hidden'></div>");
            var $zeroAlert = $("<p style='text-align: center; width: 100%; margin: 30px auto 0 auto; font-size: 20px'>조건에 맞는 화장품이 없습니다.</p>");
            $prodCardRoot.append($zeroAlert);
            $prodCardRoot.append($card);
        },
        prodListMoreBtnHidden: function ($moreBtn) {
            $moreBtn.css('display', 'none');
        },
        prodListMoreBtnShow: function ($moreBtn) {
            $moreBtn.css('display', 'inline-block');
        },
        drawLikeView: function ($likeRoot, prod) {
            $likeRoot.empty();
            if (prod.like) {
                $likeButton = $('<i class="fas fa-heart" style="font-size: 14px; cursor: pointer; color: red">' + prod.rcmdNo + '</i>');
            } else {
                $likeButton = $('<i class="fas fa-heart" style="font-size: 14px; cursor: pointer; color: gray">' + prod.rcmdNo + '</i>');
            }
            $likeRoot.append($likeButton)
        }
    }
}
