export const SideBarBlock = (bm, category, label, type) => {
  const navStyle = `
  <style>
  a,
  a:hover,
  a:focus {
      color: inherit;
      text-decoration: none;
      transition: all 0.3s;
  }
  
  .sidebar {
      min-width: 10 rem;
      max-width: 15 rem;
      background: #2d2d2d;
      color: #fff;
      min-height: 90vh;
      transition: all 0.3s;
  }
  
  .sidebar.active {
      margin-left: -250px;
  }
  
  .sidebar .sidebar-header {
      padding: 20px;
      background: #222222;
  }
  
  .sidebar ul.components {
      padding: 20px 0;
  }
  
  .sidebar ul p {
      color: #fff;
      padding: 10px;
  }
  
  .sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
  }
  
  .sidebar ul li a:hover {
      color: #222222;
      background: #fff;
  }
  
  .sidebar ul li.active>a,
  a[aria-expanded="true"] {
      color: #fff;
      background: #222222;
  }
  
  a[data-toggle="collapse"] {
      position: relative;
  }
  
  .dropdown-toggle::after {
      display: block;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
  }
  
  ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #222222;
  }
  
  ul.CTAs {
      padding: 20px;
  }
  
  ul.CTAs a {
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
  }
  
  a.download {
      background: #fff;
      color: #222222;
  }
  
  a.article,
  a.article:hover {
      background: #222222 !important;
      color: #fff !important;
  }
  </style>
  `;

  let sideBarItem = `
            <div class="sidebar-header">
                <h3>Sidebar</h3>
            </div>
            <ul class="list-unstyled components sidebar-ul">
                <p>Heading</p>
                <li class="sidebar-list">
                    <a data-gjs-type="link-box" href="#"><div>Home</div></a>
                </li>
                <li class="sidebar-list">
                    <a data-gjs-type="link-box" href="#"><div>About</div></a>
                </li>
                <li class="sidebar-list">
                    <a data-gjs-type="link-box" href="#"><div>Pages</div></a>
                </li>
                <li class="sidebar-list">
                    <a data-gjs-type="link-box" href="#"><div>Portfolio</div></a>
                </li>
                <li class="sidebar-list">
                    <a data-gjs-type="link-box" href="#"><div>Contact</div></a>
                </li>
            </ul>`;

  let sideBar = `
    <nav class="sidebar">
      ${sideBarItem}
    </nav>`;

  bm.add("sidebar", {
    label,
    category: category,
    content: `${sideBar}${navStyle}`,
    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" 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" fill-rule="nonzero"></path>
    <rect class="gjs-block-svg-path" x="15" y="10" width="5" height="1"></rect>
    <rect class="gjs-block-svg-path" x="15" y="13" width="5" height="1"></rect>
    <rect class="gjs-block-svg-path" x="15" y="11.5" width="5" height="1"></rect>
  </svg></div>
    <div class="drapcode-compo-qustion ${className}__info">
      <a
        target="_blank"
        href="https://academy.drapcode.com/docs/app-builder/layout-component-sidebar"
        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("sidebar", {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": "SideBar",
          resizable: true,
          tagName: "nav",
          classes: ["sidebar"],
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("sidebar")) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });

  dc.addType("sidebar-header", {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": "Header",
          tagName: "div",
          classes: ["sidebar-header"],
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("sidebar-header")) {
            return { type: "sidebar-header" };
          }
        },
      }
    ),
    view: defaultView,
  });

  dc.addType("sidebar-ul", {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": "Content",
          tagName: "ul",
          classes: ["sidebar-ul"],
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("sidebar-ul")) {
            return { type: "sidebar-ul" };
          }
        },
      }
    ),
    view: defaultView,
  });

  dc.addType("sidebar-list", {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": "List",
          droppable: true,
          tagName: "li",
          classes: ["sidebar-list"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "active", name: "Yes" },
                { value: "", name: "No" },
              ],
              label: "Active",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("sidebar-list")) {
            return { type: "sidebar-list" };
          }
        },
      }
    ),
    view: defaultView,
  });
};
