export const ListGroupBlock = (bm, category, label, type) => {
  const navStyle = `
  <style>
    ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
    }
    li {
      display: list-item;
      text-align: -webkit-match-parent;
    }

    .show-list-item > li {
        display: list-item !important;
    }

    *, ::after, ::before {
      box-sizing: border-box;
    }
    dl, ol, ul {
        margin-top: 0;
        margin-bottom: 1rem;
    }
    .list-group {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-left: 0;
      margin-bottom: 0;
    }
    .list-group {
      max-width: 400px;
    }
    .list-group-item-list {
      display: list-item !important;
    }
    .list-group-item {
      position: relative;
      display: block;
      padding: .75rem 1.25rem;
      margin-bottom: -1px;
      background-color: #fff;
      border: 1px solid rgba(0,0,0,.125);
    }
    .list-group-item:first-child {
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem;
    }
    .list-group-item:last-child {
      margin-bottom: 0;
      border-bottom-right-radius: .25rem;
      border-bottom-left-radius: .25rem;
    }
    .list-group-item.active {
      z-index: 2;
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    .list-group-item.disabled, .list-group-item:disabled {
      color: #6c757d;
      background-color: #fff;
    }
    .list-group-item:focus, .list-group-item:hover {
      z-index: 1;
      text-decoration: none;
    }
    .list-group-flush:first-child .list-group-item:first-child {
      border-top: 0;
    }
    .list-group-flush .list-group-item {
      border-right: 0;
      border-left: 0;
      border-radius: 0;
    }
    .list-group-item-primary {
      color: #004085;
      background-color: #b8daff;
    }
    .list-group-item-secondary {
      color: #383d41;
      background-color: #d6d8db;
    }
    .list-group-item-success {
      color: #155724;
      background-color: #c3e6cb;
    }
    .list-group-item-danger {
      color: #721c24;
      background-color: #f5c6cb;
    }
    .list-group-item-warning {
      color: #856404;
      background-color: #ffeeba;
    }
    .list-group-item-info {
      color: #0c5460;
      background-color: #bee5eb;
    }
    .list-group-item-light {
      color: #818182;
      background-color: #fdfdfe;
    }
    .list-group-item-dark {
      color: #1b1e21;
      background-color: #c6c8ca;
    }
  </style>
  `;

  let listGroupItem = `
  <li class="list-group-item">Insert your text here</li>
  <li class="list-group-item">Insert your text here</li>
  <li class="list-group-item">Insert your text here</li>
  <li class="list-group-item">Insert your text here</li>
  <li class="list-group-item">Insert your text here</li>`;

  let listGroup = `
  <ul class="list-group p-3">
    ${listGroupItem}
  </ul>`;

  bm.add("list-group", {
    label,
    category: category,
    content: `${listGroup}${navStyle}`,
    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" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="32" height="50" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1792 1408"><path d="M384 1056v64q0 13-9.5 22.5T352 1152h-64q-13 0-22.5-9.5T256 1120v-64q0-13 9.5-22.5t22.5-9.5h64q13 0 22.5 9.5t9.5 22.5zm0-256v64q0 13-9.5 22.5T352 896h-64q-13 0-22.5-9.5T256 864v-64q0-13 9.5-22.5T288 768h64q13 0 22.5 9.5T384 800zm0-256v64q0 13-9.5 22.5T352 640h-64q-13 0-22.5-9.5T256 608v-64q0-13 9.5-22.5T288 512h64q13 0 22.5 9.5T384 544zm1152 512v64q0 13-9.5 22.5t-22.5 9.5H544q-13 0-22.5-9.5T512 1120v-64q0-13 9.5-22.5t22.5-9.5h960q13 0 22.5 9.5t9.5 22.5zm0-256v64q0 13-9.5 22.5T1504 896H544q-13 0-22.5-9.5T512 864v-64q0-13 9.5-22.5T544 768h960q13 0 22.5 9.5t9.5 22.5zm0-256v64q0 13-9.5 22.5T1504 640H544q-13 0-22.5-9.5T512 608v-64q0-13 9.5-22.5T544 512h960q13 0 22.5 9.5t9.5 22.5zm128 704V416q0-13-9.5-22.5T1632 384H160q-13 0-22.5 9.5T128 416v832q0 13 9.5 22.5t22.5 9.5h1472q13 0 22.5-9.5t9.5-22.5zm128-1088v1088q0 66-47 113t-113 47H160q-66 0-113-47T0 1248V160Q0 94 47 47T160 0h1472q66 0 113 47t47 113z" fill="#c3cfe9"/></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;

  const textType = dc.getType("text");
  const textModel = textType.model;
  const textView = textType.view;

  dc.addType("list-group", {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": "List Group",
          tagName: "ul",
          resizable: true,
          classes: ["list-group"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "list-group-flush", name: "Yes" },
                { value: "", name: "No" },
              ],
              label: "Flush",
            },
            {
              type: "select",
              options: [
                { value: "ul", name: "ul (Unordered List)" },
                { value: "ol", name: "ol (Ordered List)" },
              ],
              label: "Type",
              name: "tagName",
              changeProp: 1,
            },
            {
              type: "class_select",
              options: [
                { value: "show-list-item", name: "List" },
                { value: "", name: "Block" },
              ],
              label: "Display Type",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("list-group")) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });

  dc.addType("list-group-item", {
    model: textModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": "List Item",
          droppable: true,
          editable: true,
          tagName: "li",
          classes: ["list-group-item"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "list-group-item-list", name: "List" },
                { value: "", name: "None" },
              ],
              label: "Type",
            },
          ].concat(textModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("list-group-item")) {
            return { type: "list-group-item" };
          }
        },
      }
    ),
    view: textView,
  });
};
