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

    createSizeSelect(id, selected) {
      return `
        <select id="${id}">
          ${this.createSizeOptions(selected)}
        </select>
      `
    },

    createSizeOptions(selected) {
      let options = '';
      for (let index = 1; index <= 12; index++) {
        options += `<option value="${index}" ${index == selected ? 'selected' : ''}>${index} / 12</option>`
      }

      return options;
    },

    // Return a simple HTML string or an HTML element
    createInput({ component, trait }) {
      // Here we can decide to use properties from the trait
      let phone = -1;
      let pad = -1;
      let pc = -1;

      component.getClasses().forEach(cls => {
        if (cls.startsWith('col-xs-')) {
          phone = cls.replace('col-xs-', '');
        }

        if (cls.startsWith('col-md-')) {
          pad = cls.replace('col-md-', '');
        }

        if (cls.startsWith('col-lg-')) {
          pc = cls.replace('col-lg-', '');
        }
      });

      if (phone === -1) {
        phone = 12;
        pad = 12;
        pc = 12;
      }

      // Create a new element container add some content
      const traitEl = document.createElement('div');

      traitEl.innerHTML = `
        <table class="basic-traits-responsive">
          <tbody>
            <tr>
              <td rowspan="3" class="gjs-label-wrp title"><input type="checkbox" ></input><label class="gjs-label">响应式</label></td>
              <td class="sub-title">手机</td>
              <td class="gjs-field gjs-field-select">
                <div>${this.createSizeSelect('phone', phone)}</div>
                <div class="gjs-sel-arrow">
                  <div class="gjs-d-s-arrow"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="sub-title">平板</td>
              <td class="gjs-field gjs-field-select">
                <div>${this.createSizeSelect('pad', pad)}</div>
                <div class="gjs-sel-arrow">
                  <div class="gjs-d-s-arrow"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="sub-title">PC</td>
              <td class="gjs-field gjs-field-select">
                <div>${this.createSizeSelect('pc', pc)}</div>
                <div class="gjs-sel-arrow">
                  <div class="gjs-d-s-arrow"></div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      `;
      return traitEl;
    },

    // Update the component based element changes
    onEvent({ elInput, component }) {
      const phone = elInput.querySelector('#phone').value;
      const pad = elInput.querySelector('#pad').value;
      const pc = elInput.querySelector('#pc').value;

      const originalClasses = component.getAttributes().class.replace(/col-(xs|md|lg)-\d+/g, '').trim();

      component.setClass(`${originalClasses} col-xs-${phone} col-md-${pad} col-lg-${pc}`)
    },
  });
}
