<style>
    .nobj{
        display: flex;
        justify-content: space-between;
        margin: auto;
        /* margin-bottom: 50px; */
    }
    #img_file{
        text-overflow:ellipsis;
        max-width:100px;
    }
    .img_preview{
        /* width: 50px;
        height: 20px; */
        display: flex;
    }
    #img_prev{
        object-fit: fill;
        width: 200px;
        height: 200px;
        border: 1px black dotted;
    }
</style>

<form action="#" class="nobj">
    <style>
        #img_prev_div:hover{
            border: 1px solid black;
            border-radius: 0.5vw;
            cursor: pointer;
        }
    </style>
    <div id="img_file_div" >
        <div class="img_preview">
            <label for="img_file">Изменение изображения</label><br>
            <input hidden type="file" id="img_file" onchange="previewFile()"  accept="image/*" value="" maxlength="1"><br>
        </div>
        <div id="img_prev_div" style="min-width: 200px;min-height: 200px;margin-block: 2vh;" onclick="document.getElementById('img_file').click();msg('помните что граници обозначают элемент с которым можно взаимодействовать даже если он прозрачный',{time:10,type:'help'});msg('старайтесь не оставлять пустые/прозрачные отступы',{time:15,type:'help'})">
            <img src="" id="img_prev" height="100" alt="изображение не выбрано">
        </div>
        <div>
            <input type="checkbox" id="obj_color_check" onchange="color_warning()">
            <label for="obj_color_check">возможность менять цвет</label>
            <script>
                old_prev = document.getElementById("img_prev");
                function color_warning(){
                    let color_check = document.getElementById("obj_color_check");
                    let old_prev = document.getElementById("img_prev").src;
                    if(color_check.checked == true){
                        obj_colors_load();
                        removeImageBackground(document.getElementById("img_prev").src).then((out)=>{
                            document.getElementById("img_prev").src = out;
                        })
                        msg("помните что только hex:#c8c8c8 или rgb:200,200,200 цвета будут заменины при смене цвета ",{type:"help",time:10});
                    }
                    else{
                        document.getElementById("img_prev").src = old_prev;
                    }

                }
            </script>
        </div>
    </div>
    <div>
        <div id="object_edit_type" style="display: flex;justify-content: space-between;margin-bottom: 2vh;"><div>Добавление</div></div>
        <div class="nobj_options" style="margin-bottom: 3vh;">
            <input type="text" id="nobj_name" placeholder="название товара" class="btn_white">
            <input type="submit" onclick="create_obj()" id="obj_apply_btn" value="создать товар" class="btn_blue">
        </div>
        <div id="obj_input">
            <div>
                <div style="display: flex;width: 40%;justify-content: space-between;">
                    <label for="obj_height">Высота</label>
                    <div style="display: flex;"><input type="text" class="btn_white" style="width: 50px;" id="obj_height_value" value="100" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');obj_size_change('height','text')">
                        <div class="vc">см</div></div>
                </div>
                <input style="width: 100%;" type="range" step="1" min="1" max="300" id="obj_height" value="100" oninput="obj_size_change('height','range')"> 
            </div>
            <div>
                <div style="display: flex;width: 40%;justify-content: space-between;">
                    <label for="obj_width" class="vc">Ширина</label>
                    <div style="display: flex;"><input type="text" class="btn_white" style="width: 50px;" id="obj_width_value" value="100" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');obj_size_change('width','text')">
                        <div class="vc">см</div></div>
                </div>
                <input style="width: 100%;" type="range" step="1" min="1" max="300" id="obj_width" value="100" oninput="obj_size_change('width','range')"> 
            </div>
        </div>
        <div>
            <div style="display: flex;width: 90%;justify-content: space-between;">
                <label for="obj_width" class="vc">Цена</label>
                <div style="display: flex;">
                    <input style="text-align: right; width: 40%;" id="obj_cost" type="text" class="btn_white" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" >
                    <div class="vc">руб.</div>
                </div>
            </div>
        </div>
        <div>
            <button onclick="set_obj_edit_params()" style="width: 100%;margin-block:10px;" class="btn_blue">очистить параметры</button>
        </div>
    </div>
</form>

<script>
    let cm_mult = 2;
    let obj_edit_type = "new";
    set_obj_edit_params();
    function obj_size_change(type,inp){
        if(type == "height"){
            let img = document.getElementById('img_prev');
            let range = document.getElementById('obj_height');
            let text = document.getElementById('obj_height_value');
            if (inp == "text"){
                range.value = `${text.value}`;
            }
            else{
                text.value = `${range.value}`;
            }
            img.style.height = `${range.value * cm_mult}px`;
        }else if (type == "width"){
            let img = document.getElementById('img_prev');
            let range = document.getElementById('obj_width');
            let text = document.getElementById('obj_width_value');
            if (inp == "text"){
                range.value = `${text.value}`;
            }
            else{
                text.value = `${range.value}`;
            }
            img.style.width = `${range.value * cm_mult}px`;
        }
    }

    function set_obj_edit_params(img = "/img/placeholder.png",name = "",height = 100,width = 100,cost = 0,gid = 0,colors = false, id = null){
        // поменять на if id == null усё
        if(id == null){
            obj_edit_type = "new";
            document.getElementById("object_edit_type").innerText = "добавление";
            document.getElementById("obj_apply_btn").value = "добавить товар";
            document.getElementById("obj_apply_btn").setAttribute("onclick","create_obj()");
        }else {
            obj_edit_type = "edit";
            document.getElementById("object_edit_type").innerText = "редактирование";
            let del_btn = document.createElement("button");
            del_btn.setAttribute("onclick",`obj_del(${id})`);
            del_btn.innerText = "удалить товар";
            del_btn.classList.add("btn_blue");
            document.getElementById("object_edit_type").append(del_btn);
            document.getElementById("obj_apply_btn").value = "сохранить";
            document.getElementById("obj_apply_btn").setAttribute("onclick",`save_edited_obj(${id})`);
            // document.getElementById("group_select").selectedIndex = document.getElementById("group_select").options[`obj_group_${gid}`].index;
            if (gid != 0){gids = [parseInt(gid)]}
        }

        let img_file = document.getElementById("img_file");
        let img_prev = document.getElementById("img_prev");
        let name_div = document.getElementById("nobj_name");

        let height_slider = document.getElementById("obj_height");
        let height_text = document.getElementById("obj_height_value");
        let width_slider = document.getElementById("obj_width");
        let width_text = document.getElementById("obj_width_value");
        let cost_text = document.getElementById("obj_cost");
        let colors_div = document.getElementById("obj_color_check");

        name_div.value = name;
        img_file.value = null;
        img_prev.src = img;
        img_prev.style.height = `${height* cm_mult}px`;
        img_prev.style.width = `${width* cm_mult}px`;
        cost_text.value = cost;
        colors_div.checked = JSON.parse(colors);

        height_slider.value = height;
        width_slider.value = width;
        height_text.value = `${height}`;
        width_text.value = `${width}`;
    }

    function previewFile() {
        var preview = document.querySelector('#img_prev');
        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "/img/placeholder.png";
        }
    }

    function new_obj(cost,name,img,height,width,gid,colors,callback){
        let wait_msg = msg("добавление товара",{type:"wait"});
        if(gid != null){
            if(name!=""){
                $.post( "/admin/objects/new", { cost:cost,name:name,img:img,height:height,width:width,gid:gid,colors:colors})
                .done(function( res ) {
                    // if(res["out"] == "good"){
                    //     console.log(res["body"]);
                    // }
                    msg_del(wait_msg.id);
                    callback(res);
                });
            }
            else{
                msg("название не должно быть пустым",{type:"warning"})
            }
        }
        else{
            msg("группа не выбранна",{type:"warning"})
        }
    }

    function create_obj(){
        let gid = gids.at(-1);
        let name = document.getElementById("nobj_name").value;
        let height = document.getElementById("obj_height").value;
        let width = document.getElementById("obj_width").value;
        var img = document.querySelector('#img_prev').src;
        var cost =  document.getElementById("obj_cost").value;
        var colors =  document.getElementById("obj_color_check").checked;
        name = name.replaceAll(" ","$");
        if(gid != null){
            if(name != ""){
                if (img != "/img/placeholder.png"){
                    new_obj(cost,name,img,height,width,gid,colors,(res)=>{
                        if(res["out"] == "bad" && res["err"] == "name"){
                            msg("товар уже существует",{type:"warning"});
                        }
                        else if (res["out"] == "bad" ){
                            msg("ошибка при добавлении товара",{type:"warning"});
                        }
                        else if(res["out"] == "good"){
                            msg("товар добавлен");
                            edit_get_objs();
                        }
                    });
                }
                else{
                    msg("картинка не выбрана",{type:"warning"})
                }
            }
            else{
                msg("название не должно быть пустым",{type:"warning"})
            }
        }
        else{
            msg("группа не выбранна",{type:"warning"})
        }
    }
</script>