<script>
  export let block;
  export let onChange;

  let textareaEl;
  let showAdv = false;

  const update = (patch) => onChange({ ...block.data, ...patch });

  function insertBr() {
    if (!textareaEl) return;
    const ta = textareaEl;
    const insert = "<br>";
    const start = ta.selectionStart ?? ta.value.length;
    const end = ta.selectionEnd ?? start;
    ta.value = ta.value.slice(0, start) + insert + ta.value.slice(end);
    const pos = start + insert.length;
    ta.selectionStart = ta.selectionEnd = pos;
    ta.focus();
    update({ text: ta.value });
  }
</script>

<label>
  Текст актуального заголовка
  <textarea
    class="singleline-textarea"
    rows="1"
    bind:this={textareaEl}
    value={block.data.text ?? ""}
    on:input={(e) => update({ text: e.target.value })}
  />
</label>

<button class="btn-inline" type="button" on:click={insertBr}>&lt;br&gt;</button>

<div class="advanced-wrapper">
  <button class="btn-advanced-toggle" class:is-open={showAdv} type="button" on:click={() => (showAdv = !showAdv)}>
    Доп. настройки
  </button>
  {#if showAdv}
    <div class="advanced-panel">
      <label>
        Отступ снизу (px)
        <input
          type="number"
          bind:value={block.data.bottomSpacing}
          on:input={(e) => update({ bottomSpacing: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
    </div>
  {/if}
</div>

<label class="inline">
  <input
    type="checkbox"
    checked={block.data.removeBottomSpacing}
    on:change={(e) => update({ removeBottomSpacing: e.target.checked })}
  />
  Убрать отступ после блока
</label>
