export const NavbarOldBlock = (bm, category, label, type, opts) => {
  const navStyle = `
  <style>
    .${type}-items-c {
      display: inline-block;
      float: right;
    }
    .${type} {
      background-color: #cdcdcd;
      color: #000;
      min-height: 50px;
      width: 100%;
    }
    .${type}-container {
      max-width: 950px;
      margin: 0 auto;
      width: 95%;
    }
    .${type}-container::after {
      content: "";
      clear: both;
      display: block;
    }
    .${type}-brand {
      vertical-align: top;
      display: inline-block;
      padding: 5px;
      min-height: 50px;
      min-width: 50px;
      color: inherit;
      text-decoration: none;
    }
    .${type}-menu {
      padding: 10px 0;
      display: block;
      float: right;
      margin: 0;
    }
    .${type}-menu-link {
      margin: 0;
      color: inherit;
      text-decoration: none;
      display: inline-block;
      padding: 10px 15px;
    }
    .${type}-burger {
      margin: 10px 0;
      width: 45px;
      padding: 5px 10px;
      display: none;
      float: right;
      cursor: pointer;
    }
    .${type}-burger-line {
      padding: 1px;
      background-color: white;
      margin: 5px 0;
    }
    @media (max-width: 768px) {
      .${type}-burger {
        display: block;
      }
      .${type}-items-c {
        display: none;
        width: 100%;
      }
      .${type}-menu {
        width: 100%;
      }
      .${type}-menu-link {
        display: block;
      }
    }
  </style>
  `;
  bm.add(type, {
    label: `
    <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 class="gjs-block-label">${label}</div>`,
    category: category,
    content: `<div class="${type}" data-gjs-droppable="false" data-gjs-custom-name="${label}" data-gjs="${opts.refs.navbarRef}">
    <div class="${type}-container" data-gjs-droppable="false" data-gjs-draggable="false"
      data-gjs-removable="false" data-gjs-copyable="false" data-gjs-highlightable="false"
      data-gjs-custom-name="${opts.labels.labelNavbarContainer}">
      <a href="/" class="${type}-brand" data-gjs-droppable="true"></a>
      <div class="${type}-burger" data-gjs-type="burger-menu">
        <div class="${type}-burger-line" data-gjs-custom-name="${opts.labels.labelBurgerLine}" data-gjs-droppable="false" data-gjs-draggable="false"></div>
        <div class="${type}-burger-line" data-gjs-custom-name="${opts.labels.labelBurgerLine}" data-gjs-droppable="false" data-gjs-draggable="false"></div>
        <div class="${type}-burger-line" data-gjs-custom-name="${opts.labels.labelBurgerLine}" data-gjs-droppable="false" data-gjs-draggable="false"></div>
      </div>
      <div class="${type}-items-c" data-gjs="${opts.refs.navbarItemsRef}">
        <nav class="${type}-menu" data-gjs="${opts.refs.menuRef}" data-gjs-custom-name="${opts.labels.labelMenu}">
          <a href="#" class="${type}-menu-link" data-gjs-custom-name="${opts.labels.labelMenuLink}" data-gjs-draggable="[data-gjs=${opts.refs.menuRef}]">${opts.labels.labelHome}</a>
          <a href="#" class="${type}-menu-link" data-gjs-custom-name="${opts.labels.labelMenuLink}" data-gjs-draggable="[data-gjs=${opts.refs.menuRef}]">${opts.labels.labelAbout}</a>
          <a href="#" class="${type}-menu-link" data-gjs-custom-name="${opts.labels.labelMenuLink}" data-gjs-draggable="[data-gjs=${opts.refs.menuRef}]">${opts.labels.labelContact}</a>
        </nav>
      </div>
    </div>
  </div>
  ${navStyle}`,
  });
};

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,
          draggable: false,
          droppable: false,
          copyable: false,
          removable: false,
          resizable: true,
          script: function () {
            var transEndAdded;
            var isAnimating = 0;
            var stringCollapse = "gjs-collapse";
            var clickEvent = "click";
            var transitProp = "max-height";
            var transitTiming = "ease-in-out";
            var transitSpeed = 0.25;

            var getTransitionEvent = function () {
              var t,
                el = document.createElement("void");
              var transitions = {
                transition: "transitionend",
                OTransition: "oTransitionEnd",
                MozTransition: "transitionend",
                WebkitTransition: "webkitTransitionEnd",
              };

              for (t in transitions) {
                if (el.style[t] !== undefined) {
                  return transitions[t];
                }
              }
            };

            var transitEndEvent = getTransitionEvent();

            var getElHeight = function (el) {
              var style = window.getComputedStyle(el);
              var elDisplay = style.display;
              var elPos = style.position;
              var elVis = style.visibility;
              var currentHeight = style.height;
              var elMaxHeight = parseInt(style[transitProp]);

              if (elDisplay !== "none" && elMaxHeight !== "0") {
                return el.offsetHeight;
              }

              el.style.height = "auto";
              el.style.display = "block";
              el.style.position = "absolute";
              el.style.visibility = "hidden";
              var height = el.offsetHeight;
              el.style.height = "";
              el.style.display = "";
              el.style.position = "";
              el.style.visibility = "";

              return height;
            };

            var toggleSlide = function (el) {
              isAnimating = 1;
              var elMaxHeight = getElHeight(el);
              var elStyle = el.style;
              elStyle.display = "block";
              elStyle.transition =
                transitProp + " " + transitSpeed + "s " + transitTiming;
              elStyle.overflowY = "hidden";

              if (elStyle[transitProp] == "") {
                elStyle[transitProp] = 0;
              }

              if (parseInt(elStyle[transitProp]) == 0) {
                elStyle[transitProp] = "0";
                setTimeout(function () {
                  elStyle[transitProp] = elMaxHeight + "px";
                }, 10);
              } else {
                elStyle[transitProp] = "0";
              }
            };

            var toggle = function (e) {
              e.preventDefault();

              if (isAnimating) {
                return;
              }

              var navParent = this.closest(`[data-gjs=navbar]`);
              var navItems = navParent.querySelector(`[data-gjs=navbar-items]`);
              toggleSlide(navItems);

              if (!transEndAdded) {
                navItems.addEventListener(transitEndEvent, function () {
                  isAnimating = 0;
                  var itemsStyle = navItems.style;
                  if (parseInt(itemsStyle[transitProp]) == 0) {
                    itemsStyle.display = "";
                    itemsStyle[transitProp] = "";
                  }
                });
                transEndAdded = 1;
              }
            };

            if (!(stringCollapse in this)) {
              this.addEventListener(clickEvent, toggle);
            }

            this[stringCollapse] = 1;
          },
        },
      },
      {
        isComponent(el) {
          if (el.getAttribute && el.getAttribute("data-gjs-type") == type) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultType.view,
  });
};
