import radioIcon from "raw-loader!../../icons/dot-circle-regular.svg";
export const RadioBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: `
        <div class="form-group col-12 col-md-12">
          <input name="exampleRadios" type="radio" id="exampleRadios1" class="form-check-input dc-radio" value="option1"/>
          <label class="form-radio-label" for="exampleRadios1">Default radio</label>
        </div>
      `,
    render: ({ model, className }) => `
      <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${radioIcon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/form-components#radio-button"
          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) => {
  const checkType = dc.getType("checkbox");
  dc.addType(type, {
    model: checkType.model.extend(
      {
        defaults: {
          ...checkType.model.prototype.defaults,
          "custom-name": label,
          resizable: true,
          attributes: { type: "radio" },
        },
      },
      {
        isComponent(el) {
          if (el.tagName === "INPUT" && el.type === "radio") {
            return { type: type };
          }
        },
      }
    ),
    view: checkType.view,
  });
};
