EARSystem

(() => {
    const form=document.getElementById('preferences-form'), blocked=document.getElementById('blocked-places');
    let placeIds=[];
    function render(){blocked.innerHTML=placeIds.length?placeIds.map(id=>'<button type="button" class="blocked-chip" data-unblock="'+id+'">地点 '+id.slice(0,8)+' ×</button>').join(''):'<span class="muted small">没有屏蔽地点</span>';}
    blocked.addEventListener('click',e=>{const b=e.target.closest('[data-unblock]');if(b){placeIds=placeIds.filter(x=>x!==b.dataset.unblock);render();}});
    EAR.api('/api/preferences').then(p=>{
        form.elements.budget.value=p.budget??'';form.elements.radiusMeters.value=p.radiusMeters;
        form.querySelectorAll('[name="favoriteCategories"]').forEach(x=>{x.checked=p.favoriteCategories.includes(x.value);});
        form.querySelectorAll('[name="blockedCategories"]').forEach(x=>{x.checked=p.blockedCategories.includes(x.value);});
        placeIds=p.blockedPlaces;render();
    }).catch(error=>EAR.status(form,error.message,true));
    form.addEventListener('submit',async e=>{
        e.preventDefault();EAR.busy(form,true);
        const p={budget:form.elements.budget.value?Number(form.elements.budget.value):null,radiusMeters:Number(form.elements.radiusMeters.value),blockedPlaces:placeIds,
            favoriteCategories:[...form.querySelectorAll('[name="favoriteCategories"]:checked')].map(x=>x.value),
            blockedCategories:[...form.querySelectorAll('[name="blockedCategories"]:checked')].map(x=>x.value)};
        try{await EAR.api('/api/preferences','PUT',p);EAR.status(form,'偏好已保存。');EAR.toast('偏好已保存');}
        catch(error){EAR.status(form,error.message,true);}finally{EAR.busy(form,false);}
    });
})();