// fixtures/inspector-block.mjs — the inspector's Block section: the
// selected block's props (each field marked data-types with the types
// that have it), its placement (a region on a flow slide, a box and a
// layer on a canvas one), and its phone layer (§2.5). fillBlock puts
// the block's values in the controls and shows the right ones;
// blockChange turns a changed control into its op.
//
// The controls are typed by attribute rather than by name, so a new
// prop is a new field in editor.html and nothing here:
//
//   data-prop="level" data-kind="int"   a prop → set_block props
//   data-text="label"                    a shape's label → set_text
//   data-place="region"                  the region → set_block region
//   data-box="x"                         a box field → set_block box, or
//                                        set_phone box in the phone view
//   data-phone="hidden|order|size"       the phone layer → set_phone
//
// size is view-dependent (switcher.mjs): the desktop Size field goes
// to the phone map in the phone view, which is what the switcher
// promises. The phone fieldset's own Size always goes to the map.
import { propOp, propValue, regionOp, labelOp, boxFieldOp } from './inspector-ops.mjs'
import { routeEdit, hasOverride } from './switcher.mjs'
import { defaultRegion } from './layout.mjs'

/** Sets a control's value without disturbing the one the person is typing in. */
export function setValue (el, value) {
  if (!el) return
  if (el.type === 'checkbox') {
    el.checked = !!value
    return
  }
  // Never write into the control somebody is using: a value replaced
  // under a caret loses what was half-typed, and a <select> or a colour
  // picker being changed by a peer's edit mid-choice is the same
  // surprise by another route.
  if (el === document.activeElement &&
    (el.tagName === 'SELECT' || (el.tagName === 'INPUT' && ['text', 'number', 'url', 'color'].includes(el.type)))) return
  const v = value === null || value === undefined ? '' : String(value)
  if (el.value !== v) el.value = v
}

/** Shows the elements under root whose attr names a value in wanted, hides the rest. */
export function showWhere (root, attr, test) {
  for (const el of root.querySelectorAll(`[${attr}]`)) {
    el.hidden = !test(el.getAttribute(attr))
  }
}

// The renderer's defaults, so an unset prop shows as what the slide
// shows rather than as the first option.
const DEFAULTS = {
  level: 1, size: 'm', align: 'start', style: 'bullet', fit: 'cover', count: 2,
  kind: 'rect', radius: 0, strokeWidth: 1, header: false, rows: 2, cols: 2, decorative: false
}
const SPACER_SIZE = 'l'

/** The block's text as one plain string (a shape's label). */
export function plainText (block) {
  const paras = Array.isArray(block.text) ? block.text : []
  return paras.map(p => p.map(r => r.t || '').join('')).join('\n')
}

/** The box the fields show: the phone override's in the phone view when there is one. */
export function shownBox (block, view) {
  if (view === 'phone' && block.phone && block.phone.box) return block.phone.box
  return block.box || null
}

const pctText = f => (Math.round(f * 1000) / 10).toFixed(1)

export function fillBlock ({ form, slide, block, view, labels }) {
  const typeLabel = labels.types[block.type] || block.type
  const head = form.parentElement.querySelector('[slides-block-type]')
  if (head) head.textContent = typeLabel
  showWhere(form, 'data-types', v => v.split(' ').includes(block.type))
  showWhere(form, 'data-layout', v => v === slide.layout)
  form.querySelector('[slides-phone-badge]').hidden = !hasOverride(block)

  const props = block.props || {}
  for (const el of form.querySelectorAll('[data-prop]')) {
    const key = el.dataset.prop
    let v = props[key]
    if (v === undefined || v === null) v = key === 'size' && block.type === 'spacer' && el.name === 'rst-block-spacer-size' ? SPACER_SIZE : DEFAULTS[key]
    setValue(el, v === undefined ? '' : v)
  }
  for (const el of form.querySelectorAll('[data-text]')) setValue(el, plainText(block))
  for (const el of form.querySelectorAll('[data-place="region"]')) setValue(el, block.region || defaultRegion(block.type))
  const box = shownBox(block, view)
  for (const el of form.querySelectorAll('[data-box]')) setValue(el, box ? pctText(box[el.dataset.box]) : '')
  const phone = block.phone || {}
  for (const el of form.querySelectorAll('[data-phone]')) {
    const key = el.dataset.phone
    if (key === 'hidden') setValue(el, phone.hidden === true)
    else if (key === 'order') setValue(el, Number.isInteger(phone.order) ? phone.order : '')
    else setValue(el, phone.size || '')
  }
}

/** The ops for a changed control in the Block section (usually one; [] when it is not a control this file knows). */
export function blockChange ({ el, slide, block, view }) {
  const slideId = slide.id
  if (el.dataset.prop) {
    const key = el.dataset.prop
    const value = el.type === 'checkbox' ? el.checked : el.value
    if (key === 'size' && block.type !== 'spacer') return [routeEdit({ view, slide: slideId, block, field: 'size', value })]
    return [propOp(slideId, block, key, propValue(value, el.dataset.kind || ''))]
  }
  if (el.dataset.text) return [labelOp(slideId, block, el.value.trim())]
  if (el.dataset.place === 'region') return [regionOp(slideId, block, el.value)]
  if (el.dataset.box) {
    const op = boxFieldOp({ view, slideId, block, key: el.dataset.box, percent: el.value })
    return op ? [op] : []
  }
  if (el.dataset.phone) {
    const key = el.dataset.phone
    let value
    if (key === 'hidden') value = el.checked
    else if (key === 'order') value = el.value === '' ? null : propValue(el.value, 'int')
    else value = el.value
    return [routeEdit({ view: 'phone', slide: slideId, block, field: key, value })]
  }
  return []
}