import { buttonSample } from './button-design.js';
import { createColorControl } from './color-control.js';

const root = document.querySelector('#button-defaults');
if (root) {
  const schema = JSON.parse(root.dataset.schema), form = root.closest('form');
  const read = () => Object.fromEntries([...root.querySelectorAll('[name^="buttons["]')].map(input => [input.name.slice(8, -1), input.value]));
  const update = () => {
    // Unsaved palette edits are reflected immediately in all samples.
    schema.colors = [...form.querySelectorAll('.theme-table tbody tr')].flatMap(row => {
      const key = row.querySelector('[name$="[key]"]'), value = row.querySelector('[name$="[value]"]');
      return key?.value && value ? [{ key: key.value, value: value.value }] : [];
    });
    const values = read(), previews = root.querySelector('.button-state-previews'); previews.replaceChildren();
    for (const [label, hover] of [['Normal', false], ['Beim Überfahren', true]]) {
      const state = document.createElement('div'); state.className = 'button-state';
      const title = document.createElement('span'); title.className = 'field-help'; title.textContent = label;
      state.append(title, buttonSample('Mehr erfahren', values, schema, hover)); previews.append(state);
    }
    root.querySelectorAll('[data-button-preset]').forEach((choice, index) => {
      const preset = schema.buttonPresets[index]; choice.setAttribute('aria-pressed', String(preset.shape === values.shape && preset.appearance === values.appearance));
      choice.querySelector('.cms-button')?.remove();
      const sample = buttonSample('Button', { ...values, ...preset, size: 'small' }, schema); sample.setAttribute('aria-hidden', 'true'); choice.prepend(sample);
    });
  };
  for (const input of root.querySelectorAll('[data-button-color]')) {
    const label = root.querySelector(`label[for="${input.id}"]`).textContent;
    const originalId = input.id; input.type = 'hidden'; input.id += '-value';
    const control = createColorControl({ id: originalId, label, value: input.value, colors: schema.colors, onChange: value => { input.value = value; update(); } });
    control.querySelector('.color-inherit').hidden = true;
    input.after(control);
  }
  root.querySelectorAll('[data-button-preset]').forEach((choice, index) => choice.addEventListener('click', () => {
    const preset = schema.buttonPresets[index];
    for (const key of ['shape', 'appearance']) root.querySelector(`[name="buttons[${key}]"]`).value = preset[key];
    update();
  }));
  form.addEventListener('input', update); form.addEventListener('change', update); update();
}