export default function(editor) {
  editor.TraitManager.addType('basic-traits-size', {
    noLabel: true,

    // Return a simple HTML string or an HTML element
    createInput({ component, trait }) {
      // Here we can decide to use properties from the trait
      const $el = component.getEl();
      const { width = 0, height = 0 } = $el ? $el.getBoundingClientRect() : {};

      // Create a new element container add some content
      const traitEl = document.createElement('div');
      traitEl.innerHTML = `
        <div class="basic-traits-size">
          <label class="basic-traits-size-label">尺寸</label>
          <div class="basic-traits-pair"><input type="number" min="0" step="1" id="basic-trait-width" class="basic-traits-size-width" value=${width} />px</div>
          <div class="basic-traits-pair"><input type="number" min="0" step="1" id="basic-trait-height" class="basic-traits-size-height" value=${height} />px</div>
        </div>
      `;
      return traitEl;
    },

    // Update the component based element changes
    onEvent({ elInput, component }) {
      const width = elInput.querySelector('#basic-trait-width').value;
      const height = elInput.querySelector('#basic-trait-height').value;
      const oldStyle = component.getStyle() || {};
      if (oldStyle.display === 'inline') {
        oldStyle.display = 'block';
      }
      component.setStyle({ ...oldStyle, width: `${parseInt(width)}px`, height: `${parseInt(height)}px` });

      component.em.handleUpdates.call(component.em);
    },

    onUpdate({ elInput, component }) {
      const $el = component.getEl();
      const { width = 0, height = 0 } = $el ? $el.getBoundingClientRect() : {};

      const $widthEl = elInput.querySelector('#basic-trait-width');
      const $heightEl = elInput.querySelector('#basic-trait-height');

      $widthEl.value = parseInt(width);
      $heightEl.value = parseInt(height);

      $widthEl.dispatchEvent(new CustomEvent('change:basic-trait:width'));
      $heightEl.dispatchEvent(new CustomEvent('change:basic-trait:height'));
    },
  });
}
