import randomId from "random-id";
export const ModalBlock = (bm, category, label, type, opts) => {
  const modalStyle = `
  <style>
  .modal.show{
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    overflow-x: hidden;
    overflow-y: auto;
  }
  </style>
  `;

  let modalItem = `
  <div class="${opts.types.modal_dialog}">
    <div class="${opts.types.modal_content}">
      <div class="${opts.types.modal_header}">
        <h5 class="${opts.types.modal_title}" data-gjs-custom-name="${opts.labels.modal_title}">Modal Title</h5>
        <button type="button" class="btn close" aria-label="Close">x</button>
      </div>
      <div class="${opts.types.modal_body}">
        <p>Modal body text goes here.</p>
      </div>
      <div class="${opts.types.modal_footer}">
        <button type="button" class="btn btn-secondary">Close</button>
      </div>
    </div>
  </div>`;

  let modal = `
  <div class="modal fade show">
    ${modalItem}
  </div>`;

  bm.add(type, {
    label: label,
    attributes: { class: "fa fa-window-restore", style: "display: none" },
    category: category,
    content: `${modal}${modalStyle}`,
  });
};

export default (dc, label, type, opts) => {
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const modalId = "dc-modal-" + randomId(8, "");
  dc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": label,
          tagName: "div",
          classes: ["modal"],
          attributes: {
            role: "dialog",
            tabindex: "-1",
            id: modalId,
            "data-modal-show": "",
          },
          traits: [
            {
              type: "select",
              options: [
                { value: "yes", name: "Yes" },
                { value: "", name: "No" },
              ],
              label: "Display On Load",
              name: "data-modal-show",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("modal")) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.modal_dialog, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": opts.labels.modal_dialog,
          tagName: "div",
          classes: ["modal-dialog"],
          attributes: {
            role: "document",
          },
          removable: false,
          traits: [
            {
              type: "class_select",
              options: [
                { value: "modal-dialog-centered", name: "Yes" },
                { value: "", name: "No" },
              ],
              label: "Vertically Centered",
            },
            {
              type: "class_select",
              options: [
                { value: "modal-sm", name: "Small" },
                { value: "modal-lg", name: "Large" },
                { value: "", name: "Default" },
              ],
              label: "Size",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("modal-dialog")) {
            return { type: opts.types.modal_dialog };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.modal_content, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": opts.labels.modal_content,
          tagName: "div",
          classes: ["modal-content"],
          removable: false,
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("modal-content")) {
            return { type: opts.types.modal_content };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.modal_header, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": opts.labels.modal_header,
          tagName: "div",
          classes: ["modal-header"],
          removable: false,
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("modal-header")) {
            return { type: opts.types.modal_header };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.modal_body, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": opts.labels.modal_body,
          tagName: "div",
          classes: ["modal-body"],
          removable: false,
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("modal-body")) {
            return { type: opts.types.modal_body };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.modal_footer, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": opts.labels.modal_footer,
          tagName: "div",
          classes: ["modal-footer"],
          removable: false,
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("modal-footer")) {
            return { type: opts.types.modal_footer };
          }
        },
      }
    ),
    view: defaultView,
  });
};
