export const InputBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: '<input name="input1" class="form-control"/>',

    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" width="32" height="50" 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"></path>
      <polygon class="gjs-block-svg-path" points="4 10 5 10 5 14 4 14"></polygon>
    </svg></div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/form-components#input"
          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, config) => {
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;

  dc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": label,
          tagName: "input",
          draggable: "form .form-group",
          droppable: false,
          resizable: true,
          minLength: 0,
          maxLength: 200,
          traits: [
            traits.value,
            traits.name,
            traits.placeholder,
            {
              label: "Min Length",
              type: "number",
              name: "minLength",
              placeholder: "eg. 5",
              min: 0, // Minimum number value
              max: 200, // Maximum number value
              step: 1, // Number of steps
              default: 0,
            },
            {
              label: "Max Length",
              type: "number",
              name: "maxLength",
              placeholder: "eg. 20",
              min: 0, // Minimum number value
              max: 300, // Maximum number value
              step: 1, // Number of steps
              default: 200,
            },
            {
              label: "Read Only",
              type: "checkbox",
              name: "readonly",
            },
            {
              label: config.labels.trait_type,
              type: "select",
              name: "type",
              options: [
                { value: "text", name: config.labels.type_text },
                { value: "email", name: config.labels.type_email },
                { value: "password", name: config.labels.type_password },
                { value: "number", name: config.labels.type_number },
                { value: "date", name: config.labels.type_date },
                { value: "datetime-local", name: "datetime-local" },
                { value: "hidden", name: config.labels.type_hidden },
              ],
            },
          ],
        },
      },
      {
        isComponent(el) {
          if (el.tagName === "INPUT") {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
};
