jQuery(function($){
    let has_upload_success = true;
    let _debug_templete = "<li class='list-group-item text-%%color%%'><strong>%%date%%</strong>: %%message%%</li>";
    let _files_templete = ["<li class='media'>",
        "<div class='media-body mb-1'>",
        "        <div class='row'>",
        "            <div class='col-12 mb-2'>",
        "                <strong>%%filename%%</strong> - 상태: <span class='text-muted'>대기</span>",
        "            </div>",
        "            <div class='controls mb-2 col-2'>",
        "                <button class='btn btn-sm btn-block btn-danger remove' role='button'>삭제</button>",
        "            </div>",
        "            <div class='col-10'>",
        "                <div class='progress mb-2'>",
        "                    <div class='progress-bar progress-bar-striped progress-bar-animated bg-primary'",
        "                        role='progressbar'",
        "                        style='width:0%;'",
        "                        aria-valuenow='0' aria-valuemin='0' aria-valuemax=100 >",
        "                    </div>",
        "                </div>",
        "            </div>",
        "        </div>",
        "        <hr class='mt-1 mb-1'/>",
        "    </div>",
        "</li>"].join('');

    $.ui_add_log = function(_message,_color){
        var _this = $('#debug');
        var _d = new Date();
        var _dateString = (('0' + _d.getHours())).slice(-2) + ':' +
            (('0' + _d.getMinutes())).slice(-2) + ':' +
            (('0' + _d.getSeconds())).slice(-2);
        _color = (typeof color === 'undefined' ? 'muted' : _color);
        var _templete = _debug_templete;
        _templete = _templete.replace('%%date%%',_dateString);
        _templete = _templete.replace('%%message%%',_message);
        _templete = _templete.replace('%%color%%',_color);
        _this.find('li.empty').fadeOut();
        _this.prepend(_templete);
    };

    $.ui_multi_add_file = function(id, file){
        var _this = $('#files');
        var _templete = _files_templete;
        _templete = _templete.replace('%%filename%%',file.name);

        _templete = $(_templete);
        _templete.prop('id','uploaderFile' + id);
        _templete.attr('file-id',id);

        _this.find('li.empty').fadeOut();
        _this.prepend(_templete);
    };

    $.ui_remove_file = function(id){
        var _this = $('#files');
        _this.find('#uploaderFile' + id).detach();
        if(_this.find('li.media').length == 0){
            _this.find('li.empty').fadeIn();
        }
    }

    $.ui_multi_update_file_status = function(id, status, message, file_seq){
        $('#uploaderFile' + id).prop('class','media ' + status);
        $('#uploaderFile' + id).attr('file_seq',file_seq);
        $('#uploaderFile' + id).find('span').html(message).prop('class', 'status text-' + status);
    };

    $.ui_multi_update_file_progress = function(id, percent, color, active){
        color = (typeof color === 'undefined' ? false : color);
        active = (typeof active === 'undefined' ? true : active);

        var _bar = $('#uploaderFile' + id).find('div.progress-bar');
        _bar.width(percent + '%').attr('aria-valuenow', percent);
        _bar.toggleClass('progress-bar-striped progress-bar-animated', active);

        if(percent === 0){
            _bar.html('');
        }else{
            _bar.html(percent + '%');
        }

        if(color !== false){
            _bar.removeClass('bg-success bg-info bg-warning bg-danger');
            _bar.addClass('bg-' + color);
        }
    };

    $.ui_multi_update_file_controls = function(id, start, cancel, remove, wasError){
        wasError =(typeof wasError === 'undefined' ? false : wasError);

        $('#uploaderFile' + id).find('button.start').prop('disabled', !start);
        $('#uploaderFile' + id).find('button.cancel').prop('disabled', !cancel);
        $('#uploaderFile' + id).find('button.remove').prop('disabled', !remove);

        if(!start && !cancel && !remove){
            $('#uploaderFile' + id).find('.controls').fadeOut();
        } else {
            $('#uploaderFile' + id).find('.controls').fadeIn();
        }
        if(wasError) {
            $('#uploaderFile' + id).find('button.start').html('Retry');
        }
    };

    $.validateField = function(){
        var _right_input_layout = $('#right-input-layout');
        var _required_input = _right_input_layout.find('input:required');
        var _return = true;
        
        try {
            _required_input.each(function(){
                var _this = $(this);
                if(_this.val() == ''){
                    _this.focus();
                    throw new Error();
                }
            });

            if(Object.keys(_track_obj).length == 0){
                alert('수록곡이 작성되어 있지 않습니다.');
                throw new Error();
            };

            if($('#submit_method').val() == ''){
                alert('음반(음원) 접수 방법을 선택하세요.');
                throw new Error();
            };
        }catch(e){
            _return = false;
        }
        return _return;        
    }

    $.submit = function(){
        var _right_input_layout = $('#right-input-layout');
        var _required_input = _right_input_layout.find('input:required');
        var _bln = true;
        var _submit_obj = new Object();
        var _files = $('#files').find('.media.success');
        var _file_seqs = new Array();
        _files.each(function(){
            var _this = $(this);
            if($.trim(_this.attr('file_seq')) !=''){
                _file_seqs.push(_this.attr('file_seq'));
            }
        });

        if(!$.validateField()) return false;

        _right_input_layout.find('input').each(function(){
            var _this = $(this);
            _submit_obj[_this.attr('id')] = _this.val();
        });

        var _track_list = $('#submit_track_list tbody').find('tr');
        _track_list.each(function(){
            var _tr = $(this);
            var _idx = _tr.attr('track-idx');
            var _main_yn = _tr.find('input[name=main_yn');
            _track_obj[_idx]['main_yn'] = (_main_yn.prop('checked')) ? 'Y':'';
        });

        _submit_obj['track_list'] = Object.values(_track_obj);
        var _submit_method = $('#submit_method').val();
        
        _submit_obj['submit_method'] = _submit_method;
        _submit_obj['right_sign'] = _right_input_layout.find('img.img_right_sign').attr('src');
        _submit_obj['agent_sign'] = _right_input_layout.find('img.img_agent_sign').attr('src');
        _submit_obj['file_seq'] = _file_seqs;

        if(!confirm('작성된 등록명세서를 제출하시겠습니까?')) return false;

        $.ajax({
            type:'post',
            dataType:'json',
            data:JSON.stringify(_submit_obj),
            url:'/setsubmit/1',
            success:function(data){
                if(data['message']=='OK'){
                    $('#submit-seq').val(data['seq']);
                    $('#show-doc-btn').attr('href','/getsubmit/1/'+data['seq']);
                    $('#success-message-modal').show();
                }else{
                    alert(data['message']);
                }
            },
            error:function(err){
                console.warn(error);
            }
        });
    };

    $('#submit-btn').on('click', function(evt){
        evt.preventDefault();
        if($.validateField()){
            $('#drag-and-drop-zone').dmUploader('start');
        } 
    });

    $('#btnApiCancel').on('click', function(evt){
        evt.preventDefault();
        $('#drag-and-drop-zone').dmUploader('cancel');
    });
    $('#files').on('click','.btn.remove',function(evt){
        evt.preventDefault();
        var _id = $(this).closest('li').attr('file-id');
        $('#drag-and-drop-zone').dmUploader('remove',_id);
    });
    $('#files').on('click','.btn.start',function(evt){
        evt.preventDefault();
        var _id = $(this).closest('li').attr('file-id');
        $('#drag-and-drop-zone').dmUploader('start',_id);
    });
    $('#files').on('click','.btn.cancel',function(evt){
        evt.preventDefault();
        var _id = $(this).closest('li').attr('file-id');
        $('#drag-and-drop-zone').dmUploader('cancel',_id);
    });

    $('#drag-and-drop-zone').dmUploader({
        url:'/attach/upload',
        maxFileSize:200000000,
        auto: false,
        queue: true,
        extFilter:['mp3','wav','flac','jpg','jpeg','png','zip','xls','xlsx','doc','docx','hwp'],
        extraData: function(){
            return {
                'submit_seq': $('#submit-seq').val()
            };
        },
        onDragEnter:function(){
            this.addClass('active');
        },
        onDragLeave:function(){
            this.removeClass('active');
        },
        onInit:function(){
            $.ui_add_log('initialized','info');
        },
        onComplete:function(){
            $.ui_add_log('모든 전송이 완료되었습니다.');            
            $.submit();
        },
        onNewFile: function(id, file){
            $.ui_add_log('파일 추가 #' + id);
            $.ui_multi_add_file(id, file);
            has_upload_success = true;
        },
        onBeforeUpload: function(id){
            $.ui_add_log('#' + id + ' 업로드 시작');
            $.ui_multi_update_file_status(id, 'uploading', '업로드 중..','');
            $.ui_multi_update_file_progress(id, 0, '', true);
            $.ui_multi_update_file_controls(id, false, true, false);
        },
        onUploadCanceled: function(id){
            $.ui_multi_update_file_status(id, 'warning', '사용자에 의하여 취소됨.','');
            $.ui_multi_update_file_progress(id, 0, 'warning', false);
            $.ui_multi_update_file_controls(id, true, false, true);
        },
        onUploadProgress: function(id, percent){
            $.ui_multi_update_file_progress(id, percent);
        },
        onUploadSuccess: function(id,data){
            $.ui_add_log('#' + id + ' 파일에 대한 서버 응답: ' + JSON.stringify(data));
            $.ui_add_log('#' + id + '의 파일 업로드 완료', 'success');
            $.ui_multi_update_file_status(id, 'success', '업로드 완료',data['file_seq']);
            $.ui_multi_update_file_progress(id, 100, 'success', false);
            $.ui_multi_update_file_controls(id, false, false, false);
        },
        onUploadError: function(id, xhr, status, message){
            $.ui_add_log('#' + id + '의 파일 업로드 실패', 'warning');
            $.ui_multi_update_file_status(id, 'danger', xhr.responseJSON['message']);
            $.ui_multi_update_file_progress(id, 0, 'danger', false);
            $.ui_multi_update_file_controls(id, false, false, true);

            if(!has_upload_success) has_upload_success = false;
        },
        onFallbackMode: function(){
            $.ui_add_log('해당 브라우저는 멀티 업로드 플러그인이 지원하지 않습니다.', 'danger');
        },
        onFileSizeError: function(file){
            $.ui_add_log('파일 \'' + file.name + '\'를 추가할 수 없습니다.: 용량 제한 초과', 'danger');
        },
        onFileExtError: function(file){
            var ext = file.name.toLowerCase().split(".").pop();
            $.ui_add_log('파일 \'' + file.name + '\'를 추가할 수 없습니다.: 확장자 제한', 'danger');
        },
        onDeleteComplete: function(id){
            $.ui_add_log('파일 삭제 #' + id);
            $.ui_remove_file(id);
        },
    });
    
});