import _s from "underscore.string";
import labelIcon from "raw-loader!../../icons/label.svg";

export const LabelBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: {
      type: "label",
      tagName: "span",
      classes: ["label", "badge-secondary"],
      content: "New!",
    },
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${labelIcon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/form-components#label"
          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 (domc, label, type) => {
  const textType = domc.getType("text");
  const textModel = textType.model;
  const textView = textType.view;

  domc.addType(type, {
    model: textModel.extend(
      {
        defaults: Object.assign({}, textModel.prototype.defaults, {
          "custom-name": label,
          tagName: "span",
          classes: ["label"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "", name: "None" },
                { value: "badge-primary", name: "Primary" },
                { value: "badge-secondary", name: "Secondary" },
                { value: "badge-success", name: "Success" },
                { value: "badge-info", name: "Info" },
                { value: "badge-warning", name: "Warning" },
                { value: "badge-danger", name: "Danger" },
                { value: "badge-light", name: "Light" },
                { value: "badge-dark", name: "Dark" },
              ],
              label: "Context",
            },
            {
              type: "text",
              label: "For",
              name: "for",
            },
          ].concat(textModel.prototype.defaults.traits),
        }),
      },
      {
        isComponent(el) {
          if (el.getAttribute && el.getAttribute("data-gjs-type") === "label") {
            return { type: type };
          }
        },
      }
    ),
    view: textView,
  });
};
