import { Box } from '../../classes/display/box.js';
// import { Document } from '../../classes/display/document.js';
import { Scene } from '../../classes/display/scene.js';
import { mochaRun } from '../../util/helpers.js';

const rootElement = document.getElementById('scene');
const rootBox = new Box('rootBox', rootElement).flex();
const scene = window.scene = new Scene('Input test', rootBox);

scene.withDocument();

describe('Document > Form > TextField', () => {
  before(() => {
    scene.withDocument('Document 1', (d) => d.form());
  });
  it('can accept input and call value update callback', () => {
    const doc = scene.lastDocument;
    const form = doc.lastElement;
    /**
     * Handler callback for form element value updates.
     * In this case we use a collection of DisplayValues as a straightforward way to render the form element values.
     */
    const dvMap = new Map();
    const updateFieldValueDisplay = ({ id, name, value }) => {
      const dv = dvMap.get(id) ?? scene.addDisplayValue(name);
      dvMap.set(id, dv);
      dv.set(value);
    };

    form.textField({
      id: 'input1',
      name: 'Input 1',
      cb: updateFieldValueDisplay,
      cbEventTypes: ['keydown', 'keyup'],
      cbOnInit: true,
    });
    doc.remark('Hmm...!');
  });
  // it('can exist within a graph', () => {
  //   scene.withSectionFlowchart({ id: 'flowchart', name: 'Graph' });
  //   const graph = scene.lastFlowchart();
  // });
});

describe('Document > Form > Button', () => {
  before(() => {
    scene.withDocument('Document 2', (d) => d.form());
  });
  it('calls a callback when clicked', () => {
    const doc = scene.lastDocument;
    const form = doc.lastElement;
    const dvMap = new Map();
    let clicks = 0;
    const handleClick = ({ id, name }, { initializing }) => {
      const dv = dvMap.get(id) ?? scene.addDisplayValue(name);
      dvMap.set(id, dv);
      if (!initializing) {
        clicks++;
        dv.set(`clicked ${clicks} time${clicks !== 1 ? 's' : ''}`);
      }
    };

    doc.remark('<br/>');
    doc.remark('Button:');
    form.button({ id: 'button1', name: 'Button 1', cb: handleClick });
    doc.remark('Yeah?');
  });
});

mochaRun();