import {
  query as domQuery,
} from 'min-dom';
import { act, fireEvent } from '@testing-library/preact';

import {
  getBpmnJS,
} from 'bpmn-js/test/helper';
import Modeler from 'bpmn-js/lib/Modeler';
import TestContainer from 'mocha-test-container-support';
import { bootstrapBpmnJS, inject, insertCSS } from 'bpmn-js/test/helper';
import {getBusinessObject} from 'bpmn-js/lib/util/ModelUtil';
import {createMoveEvent} from 'diagram-js/lib/features/mouse/Mouse';

let PROPERTIES_PANEL_CONTAINER;

export function bootstrapPropertiesPanel(diagram, options, locals) {
  return async function() {
    const container = TestContainer.get(this);

    insertBpmnStyles();
    insertCoreStyles();

    const createModeler = bootstrapBpmnJS(Modeler, diagram, options, locals);
    await act(() => createModeler.call(this));

    // (2) clean-up properties panel
    clearPropertiesPanelContainer();

    // (3) attach properties panel
    const attachPropertiesPanel = inject(function(propertiesPanel) {
      PROPERTIES_PANEL_CONTAINER = document.createElement('div');
      PROPERTIES_PANEL_CONTAINER.classList.add('properties-container');

      container.appendChild(PROPERTIES_PANEL_CONTAINER);

      return act(() => propertiesPanel.attachTo(PROPERTIES_PANEL_CONTAINER));
    });
    await attachPropertiesPanel();
  };
}

export function clearPropertiesPanelContainer() {
  if (PROPERTIES_PANEL_CONTAINER) {
    PROPERTIES_PANEL_CONTAINER.remove();
  }
}

export function insertCoreStyles() {
  insertCSS(
    'properties-panel.css',
    require('bpmn-js-properties-panel/dist/assets/properties-panel.css').default
  );
  insertCSS(
    'test.css',
    require('./test.css').default
  );
}

export function insertBpmnStyles() {
  insertCSS(
    'diagram.css',
    require('bpmn-js/dist/assets/diagram-js.css').default
  );

  // @barmac: this fails before bpmn-js@9
  insertCSS(
    'bpmn-js.css',
    require('bpmn-js/dist/assets/bpmn-js.css').default
  );

  insertCSS(
    'bpmn-font.css',
    require('bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css').default
  );
}



export function expectSelected(id) {
  return getBpmnJS().invoke(async function(elementRegistry, selection) {
    const element = elementRegistry.get(id);

    await act(() => {
      selection.select(element);
    });

    return element;
  });
}

export function getPropertiesPanel() {
  return PROPERTIES_PANEL_CONTAINER;
}


export function findEntry(id, container) {
  return domQuery(`[data-entry-id='${ id }']`, container);
}

export function findGroupEntry(id, container) {
  return domQuery(`[data-group-id='group-${ id }']`, container);
}

export function findInput(type, container) {
  return domQuery(`input[type='${ type }']`, container);
}

export function findButton(id, container) {
  return domQuery(`button[id='${ id }']`, container);
}

export function findSelect(container) {
  return domQuery('select', container);
}

export function changeInput(input, value) {
  fireEvent.input(input, { target: { value } });
}

export function pressButton(button) {
  fireEvent.click(button);
}

export function findDataObjects(process) {

  let dataObjects = [];
  for (const element of process.flowElements) {
    if (element.$type === 'bpmn:DataObject') {
      dataObjects.push(element);
    }
  }
  return dataObjects;
}

export function findDataObject(process, id) {
  for (const dataObj of findDataObjects(process)) {
    if (dataObj.id === id) {
      return dataObj;
    }
  }
}


/**
 * Drags an element from the palette onto the canvas.
 * @param id
 */
export function triggerPaletteEntry(id) {
  getBpmnJS().invoke(function(palette) {
    var entry = palette.getEntries()[ id ];

    if (entry && entry.action && entry.action.click) {
      entry.action.click(createMoveEvent(0, 0));
    }
  });
}