import randomId from "random-id";
export const SubmenuBlock = (bm, category, label, type, opts) => {
  const customId = "dc-sm-" + randomId(8, "");
  bm.add(type, {
    label,
    category: category,
    content: `
    <li class="nav-item dropdown" data-gjs-type="${type}" style="display: inline-block">
      <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-gjs-custom-name="${opts.labels.labelNavItemSubMenuToggle}">
        Dropdown link
      </a>
      <ul class="dropdown-menu" data-gjs-type="${opts.types.nav_item_dropdown_menu}">
      <a data-gjs-type="link-box" class="dropdown-item" href="#"><div data-gjs-type="text" draggable="true" data-highlightable="1">Action</div></a>
      <a data-gjs-type="link-box" class="dropdown-item" href="#"><div data-gjs-type="text" draggable="true" data-highlightable="1">Another action</div></a>
        <a data-gjs-type="link-box" class="dropdown-item" href="#"><div data-gjs-type="text" draggable="true" data-highlightable="1">Something else here</div></a>
      </ul>
    </li>
    `,
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six"><svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
      <rect class="gjs-block-svg-path" x="15" y="10" width="5" height="1"></rect>
      <rect class="gjs-block-svg-path" x="15" y="13" width="5" height="1"></rect>
      <rect class="gjs-block-svg-path" x="15" y="11.5" width="5" height="1"></rect>
    </svg></div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/layout-component-sub-menu"
          draggable="false"
        >
          <i class="bem-Svg ${className}__info-fa fa fa-info-circle" title="Check how to use ${label}?"></i>
        </a>
      </div>
      <div class="drapcode-com-one">${model.get("label")}</div>
    </div>
  `,
  });
};

export default (dc, label, type, opts) => {
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  dc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          ...defaultModel.prototype.defaults,
          "custom-name": label,
          tagName: "li",
          classes: ["nav-item", "dropdown"],
          // draggable: ".navbar-nav", // Can be dropped only inside `navbar-nav` class elements
          droppable: false, // Can't drop other elements inside
        }),
      },
      {
        isComponent(el) {
          if (el.getAttribute && el.getAttribute("data-gjs-type") === type) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.nav_item_dropdown_menu, {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          "custom-name": opts.labels.labelNavItemDropdownMenu,
          tagName: "ul",
          classes: ["dropdown-menu"],
        }),
      },
      {
        isComponent(el) {
          if (
            el.getAttribute &&
            el.getAttribute("data-gjs-type") ===
              opts.types.nav_item_dropdown_menu
          ) {
            return { type: opts.types.nav_item_dropdown_menu };
          }
        },
      }
    ),
    view: defaultView,
  });
};
