const __DEFAULT_SELECTBOX_STR = "선택해주세요";
const __ORDER_SELECT_BOX = ['cls-l', 'cls-m', 'cls-s', 'cls-d'];

const removeAllOptions = (isRemove, target) => {
    if(isRemove){
        target.find('option').remove();
        target.append(new Option(__DEFAULT_SELECTBOX_STR, ""));
    }
}

const resetSubSelectBoxOption = (target_id) => {
    let target_obj;
    let isResetSelectBox = false;
    __ORDER_SELECT_BOX.forEach(v => {
        target_obj = $("#"+v);
        if(v === target_id){
            isResetSelectBox = true;
        }
        removeAllOptions(isResetSelectBox, target_obj);
    });
}

const setClassification = (target, val, level) => {
    callClassification({'upper_prd_cls_cd' : val, 'cls_lvl_no' : level}, (res)=>{
        res.forEach(element => {
            target.append(new Option(element.PRD_CLS_NM, element.PRD_CLS_CD));
        });
    }); 
}

const setSubSelectBoxOption = ($target, val, level) => {
    resetSubSelectBoxOption($target.attr("id"));
    if (val === "") return;
    setClassification($target, val, level);
}

const setInitValue4SelectBox = (target, i) => {
    removeAllOptions(true, target);
    if (i === 0){
        setClassification(target, "", 1);
    }
}

const bindEventOnSelectBox = (target, i) => {
    if (i !== (__ORDER_SELECT_BOX.length-1)) {
        target.change(function() {
            setSubSelectBoxOption($("#"+__ORDER_SELECT_BOX[i+1]), $(this).val(), (i+2));
        });
    }
}

const initSelectBox = () => {
    __ORDER_SELECT_BOX.forEach((o, i) => {
        let target = $("#"+o);
        setInitValue4SelectBox(target, i);
        bindEventOnSelectBox(target, i);
    });  
    
}

$(document).ready(function() {
    initSelectBox();  
});