export const TableBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: {
      type,
      name: "Table",
      tagName: "table",
      resizable: true,
      content: `
      <thead>
        <tr>
          <th scope="col"><div>#</div>
          </th>
          <th scope="col"><div>First</div>
          </th>
          <th scope="col"><div>Last</div>
          </th>
          <th scope="col"><div>Handle</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="row">
            <div>1</div>
          </td>
          <td>
            <div>Mark</div>
          </td>
          <td>
            <div>Otto</div>
          </td>
          <td>
            <div>@mdo</div>
          </td>
        </tr>
    </tbody>`,
    },
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
    <div class="drap-on-six"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32" height="50"><path d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z"/></svg></div>
    <div class="drapcode-compo-qustion ${className}__info">
      <a
        target="_blank"
        href="#"
        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 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: type,
  //         // droppable: ['tbody', 'thead', 'tfoot'],
  //         resizable: true,
  //         classes: [`${type}`],
  //         traits: [
  //           {
  //             type: "class_select",
  //             options: [
  //               { value: "table-responsive", name: "Yes" },
  //               { value: "", name: "No" },
  //             ],
  //             label: "Responsive",
  //           },
  //           {
  //             type: "class_select",
  //             options: [
  //               { value: "table-dark", name: "Yes" },
  //               { value: "", name: "No" },
  //             ],
  //             label: "Dark",
  //           },
  //           {
  //             type: "class_select",
  //             options: [
  //               { value: "table-striped", name: "Yes" },
  //               { value: "", name: "No" },
  //             ],
  //             label: "Striped",
  //           },
  //           {
  //             type: "class_select",
  //             options: [
  //               { value: "table-bordered", name: "Yes" },
  //               { value: "", name: "No" },
  //             ],
  //             label: "Bordered",
  //           },
  //           {
  //             type: "class_select",
  //             options: [
  //               { value: "table-hover", name: "Yes" },
  //               { value: "", name: "No" },
  //             ],
  //             label: "Hover",
  //           },
  //           {
  //             type: "class_select",
  //             options: [
  //               { value: "table-sm", name: "Yes" },
  //               { value: "", name: "No" },
  //             ],
  //             label: "Compact",
  //           },
  //         ].concat(defaultModel.prototype.defaults.traits),
  //       },
  //     },
  //     {
  //       isComponent(el) {
  //         if (
  //           el.tagName &&
  //           el.tagName === "TABLE" &&
  //           el.getAttribute &&
  //           el.getAttribute("data-gjs-type") === type
  //         ) {
  //           return { type: type };
  //         }
  //       },
  //     }
  //   ),
  //   view: defaultView,
  // });
  dc.addType("thead", {
    model: defaultModel.extend(
      {
        defaults: {
          ...dc.getType("thead").model.prototype.defaults,
          "custom-name": "Table Head",
          tagName: "thead",
          editable: true,
          traits: [
            {
              type: "scope",
              options: [
                { value: "col", name: "Column" },
                { value: "row", name: "Row" },
              ],
              label: "Scope",
            },
          ].concat(dc.getType("thead").model.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (
            el.tagName &&
            el.tagName === "THEAD" &&
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === "thead"
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType("tbody", {
    model: defaultModel.extend(
      {
        defaults: {
          ...dc.getType("tbody").model.prototype.defaults,
          "custom-name": "Table Body",
          tagName: "tbody",
          editable: true,
          droppable: true,
          layerable: true,
          selectable: true,
          ...dc.getType("tbody").model.prototype.defaults.traits,
        },
      },
      {
        isComponent(el) {
          if (
            el.tagName &&
            el.tagName === "tbody" &&
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === "tbody"
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType("tr", {
    model: defaultModel.extend(
      {
        defaults: {
          ...dc.getType("row").model.prototype.defaults,
          "custom-name": "Table Row",
          tagName: "tr",
          ...dc.getType("row").model.prototype.defaults.traits,
        },
      },
      {
        isComponent(el) {
          if (
            el.tagName &&
            el.tagName === "TR" &&
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === "tr"
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType("th", {
    model: defaultModel.extend(
      {
        defaults: {
          ...dc.getType("cell").model.prototype.defaults,
          "custom-name": "Header Cell",
          tagName: "th",
          traits: [
            {
              type: "scope",
              options: [
                { value: "col", name: "Column" },
                { value: "row", name: "Row" },
              ],
              label: "Scope",
            },
          ].concat(dc.getType("cell").model.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (
            el.tagName &&
            el.tagName === "TH" &&
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === "th"
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  // dc.addType("td", {
  //   model: defaultModel.extend(
  //     {
  //       defaults: {
  //         ...dc.getType("cell").model.prototype.defaults,
  //         "custom-name": "Data Cell",
  //         tagName: "td",
  //         ...dc.getType("cell").model.prototype.defaults.traits,
  //       },
  //     },
  //     {
  //       isComponent(el) {
  //         if (
  //           el.tagName &&
  //           el.tagName === "TD" &&
  //           el.getAttribute &&
  //           el.getAttribute("data-gjs-type") === "td"
  //         ) {
  //           return { type: type };
  //         }
  //       },
  //     }
  //   ),
  //   view: defaultView,
  // });
};
