// Generated, do not edit. sha256:9537fc0b4eaa35092768e80eee626c20b2e7da8195e3aa3271037126f3d4cfa3
import { t } from '../i18n/index.js';
import { mainToSub, subToMain, hasSubunit, isMetal } from './format.js';
import { openPopover, closePopover } from './popover.js';
import { CONFIG } from '../../shared/config.js';
import { esc } from './escape.js';

export function openUnitConvert(anchorEl, { asset, value, onApply }) {
  if (!hasSubunit(asset)) return;
  const metal = isMetal(asset);
  const dec = asset.decimals || 0;
  const subField = asset.displayUnit === 'subunit';

  const U = CONFIG.METALS.UNITS;
  const round6 = x => Number(Number(x).toFixed(6));
  const m2s = metal ? (m => round6(Number(m) * U[asset.unit] / U[asset.subunit])) : (m => mainToSub(m, dec));
  const s2m = metal ? (s => round6(Number(s) * U[asset.subunit] / U[asset.unit])) : (s => subToMain(s, dec));

  const seed = parseFloat(value);
  let mainVal = '', subVal = '';
  if (Number.isFinite(seed)) {
    if (subField) { subVal = metal ? seed : Math.round(seed); mainVal = s2m(subVal); }
    else { mainVal = seed; subVal = m2s(mainVal); }
  }

  const mainLabel = esc(asset.unit || t('convert.main'));
  const subLabel = esc(asset.subunit || t('convert.sub'));
  const subStep = metal ? 'any' : '1';

  const { el, position } = openPopover(anchorEl, {
    className: 'conv-pop',
    onClose: () => { if (document.activeElement === document.body) anchorEl.focus(); },
  });
  el.innerHTML = `
    <div class="t-label conv-head">${esc(t('convert.title'))}</div>
    <div class="conv-row">
      <label class="conv-label">${mainLabel}</label>
      <input class="input" data-conv-main type="number" step="any" min="0" value="${mainVal}">
    </div>
    <div class="conv-row">
      <label class="conv-label">${subLabel}</label>
      <input class="input" data-conv-sub type="number" step="${subStep}" min="0" value="${subVal}">
    </div>
    <button class="btn btn-primary btn-sm conv-apply" data-conv-apply>${esc(t('convert.apply'))}</button>`;
  position();

  const mainEl = el.querySelector('[data-conv-main]');
  const subEl = el.querySelector('[data-conv-sub]');

  mainEl.oninput = () => { const m = parseFloat(mainEl.value); subEl.value = Number.isFinite(m) ? m2s(m) : ''; };
  subEl.oninput = () => { const s = parseFloat(subEl.value); mainEl.value = Number.isFinite(s) ? s2m(s) : ''; };

  const apply = () => {
    const out = subField ? subEl.value : mainEl.value;
    if (out === '') return;
    onApply(String(out));
    closePopover();
  };
  el.querySelector('[data-conv-apply]').onclick = apply;
  el.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); apply(); } });

  (subField ? mainEl : subEl).focus();
}