import checkIcon from "raw-loader!../../icons/check-square-solid.svg";
export const CheckboxBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: `
    <div class="form-group col-12 col-md-12">
      <input name="defaultCheck" type="checkbox" id="defaultCheck1" class="form-check-input dc-checkbox" value=""/>
      <label class="form-check-label" for="defaultCheck1">Default checkbox</label>
    </div>
      `,
    render: ({ model, className }) => `
      <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${checkIcon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/form-components#checkbox"
          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, traits) => {
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const inputType = dc.getType("input");
  const inputModel = inputType.model;

  dc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: {
          ...inputModel.prototype.defaults,
          "custom-name": label,
          copyable: false,
          droppable: false,
          resizable: true,
          attributes: { type: "checkbox" },
          traits: [traits.id, traits.name, traits.value],
        },

        init() {
          this.listenTo(this, "change:checked", this.handleChecked);
        },

        handleChecked() {
          let checked = this.get("checked");
          let attrs = this.get("attributes");
          const view = this.view;

          if (checked) {
            attrs.checked = true;
          } else {
            delete attrs.checked;
          }

          if (view) {
            view.el.checked = checked;
          }

          this.set("attributes", { ...attrs });
        },
      },
      {
        isComponent(el) {
          if (el.tagName === "INPUT" && el.type === "checkbox") {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView.extend({
      events: {
        click: "handleClick",
      },

      handleClick(e) {
        e.preventDefault();
      },
    }),
  });
};
