import windowIcon from "raw-loader!../../icons/window-maximize-solid.svg";
export const JumbotronBlock = (bm, category, label, type) => {
  const jumbotronStyle = `
  <style>
  @media (min-width: 576px)
  .jumbotron {
      padding: 4rem 2rem;
  }
  .jumbotron {
      padding: 2rem 1rem;
      margin-bottom: 2rem;
      background-color: #e9ecef;
      border-radius: .3rem;
  }
  .jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
  }
  </style>
  `;

  let jumbotronItem = `
  <div class="jumbotron">
    <div class="jumbotron-body">
      <h1>This is Heading</h1>
      <p class="lead">
        This is a simple hero unit, a simple jumbotron-style component for calling
        extra attention to featured content or information.
      </p>
    </div>
  </div>`;

  bm.add(type, {
    label,
    category: category,
    content: `${jumbotronItem}${jumbotronStyle}`,

    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${windowIcon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/layout-component-jumbotron"
          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: "div",
          droppable: true,
          resizable: true,
          style: { "min-height": "500px" },
          classes: ["jumbotron"],
          traits: [
            {
              type: "jumbotron_class_select",
              options: [
                { value: "jumbotron", name: "Fixed" },
                { value: "jumbotron jumbotron-fluid", name: "Fluid" },
              ],
              label: "Width",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (
            el &&
            el.classList &&
            (el.classList.contains("jumbotron") ||
              el.classList.contains("jumbotron-fluid"))
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType("jumbotron_body", {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          "custom-name": "Jumbotron Body",
          tagName: "p",
          classes: ["jumbotron-body"],
        }),
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("jumbotron-body")) {
            return { type: "jumbotron_body" };
          }
        },
      }
    ),
    view: defaultView,
  });
};
