import randomId from "random-id";
export const NavbarBlock = (bm, category, label, type, opts) => {
  const customId = "dc-nb-" + randomId(8, "");
  bm.add(type, {
    label: `
    <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="32" height="50">
      <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: `
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary" data-gjs-type="${type}">
      <a data-gjs-type="link-box" class="navbar-brand" href="#"><div>DrapCode</div></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#${customId}" data-bs-toggle="collapse" data-bs-target="#${customId}" aria-controls="${customId}" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="${customId}" data-gjs-type="${opts.types.navbar_container}">
        <ul class="navbar-nav justify-content-end" data-gjs-type="${opts.types.navbar_nav}">
          <li class="nav-item active">
            <a data-gjs-type="link-box" class="nav-link" href="#"><div>Home</div> <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a data-gjs-type="link-box" class="nav-link" href="#"><div>Features</div></a>
          </li>
          <li class="nav-item">
            <a data-gjs-type="link-box" class="nav-link" href="#"><div>Pricing</div></a>
          </li>
          <li class="nav-item">
            <a data-gjs-type="link-box" class="nav-link" href="#"><div>Contact</div></a>
          </li>
        </ul>
      </div>
    </nav>
    `,
    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-navbar"
          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>
  `,
  });

  bm.add(type + "frequently_used", {
    label: `
    <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="32" height="50">
      <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: "Frequently Used",
    attributes: {
      style: "order: 2",
    },
    content: `
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary" data-gjs-type="${type}">
        <a data-gjs-type="link-box" class="navbar-brand" href="#"><div>DrapCode</div></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#${customId}" data-bs-toggle="collapse" data-bs-target="#${customId}" aria-controls="${customId}" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="${customId}" data-gjs-type="${opts.types.navbar_container}">
          <ul class="navbar-nav justify-content-end" data-gjs-type="${opts.types.navbar_nav}">
            <li class="nav-item active">
              <a data-gjs-type="link-box" class="nav-link" href="#"><div>Home</div> <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a data-gjs-type="link-box" class="nav-link" href="#"><div>Features</div></a>
            </li>
            <li class="nav-item">
              <a data-gjs-type="link-box" class="nav-link" href="#"><div>Pricing</div></a>
            </li>
            <li class="nav-item">
              <a data-gjs-type="link-box" class="nav-link" href="#"><div>Contact</div></a>
            </li>
          </ul>
        </div>
      </nav>
    `,
    render: ({ model, className }) => `
    <div class="${className}-label ${className}__drapcode-wrap">
    ${model.get("label")}
    </div>

    <span class="${className}__info">
      <a target="_blank" href="https://academy.drapcode.com/docs/app-builder/layout-component-navbar" draggable="false">
        <i class="${className}__info-fa fa fa-info-circle" style="margin-left: 5px" title="Check how to use ${label}?"></i>
      </a>
    </span>
  `,
  });
};
export default (dc, label, type, opts) => {
  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: "nav",
          classes: ["navbar"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "navbar-dark", name: "Dark" },
                { value: "navbar-light", name: "Light" },
              ],
              label: "Theme",
            },
            {
              type: "class_select",
              options: [
                { value: "bg-dark", name: "Dark" },
                { value: "bg-primary", name: "Primary" },
                { value: "bg-light", name: "Light" },
              ],
              label: "Background Colour",
            },
            {
              type: "class_select",
              options: [
                { value: "", name: "Default" },
                { value: "flex-column", name: "Center" },
              ],
              label: "Align Content",
            },
            {
              type: "class_select",
              options: [
                { value: "", name: "Horizontal" },
                { value: "flex-column", name: "Vertical" },
              ],
              name: "alignment",
              label: "Alignment",
              changeProp: 1,
            },
            {
              type: "class_select",
              options: [
                { value: "", name: "Default" },
                { value: "fixed-top", name: "Fixed Top" },
                { value: "fixed-bottom", name: "Fixed Bottom" },
                { value: "sticky-top", name: "Sticky Top" },
              ],
              label: "Position",
            },
          ].concat(defaultModel.prototype.defaults.traits),
          script: function () {},
        },
        init() {
          this.listenTo(
            this,
            "change:alignment",
            this.updateNavbarAndNavigation
          );
        },
        updateNavbarAndNavigation() {
          let attrs = this.getAttributes();

          if (this.changed["alignment"]) {
            let classArr = attrs.class.split(" ");
            let resultArr = classArr.filter((e) =>
              e.startsWith("flex-column") ? e.replace(e, "") : e
            );
            resultArr.push(this.changed["align-content"]);
            attrs.class = resultArr.toString().replaceAll(",", " ");

            //Setting navbar-nav classes based on parent class.
            let navBarNav = this.findType(opts.types.navbar_nav);
            let navBarNavClasses = navBarNav[0].getClasses();

            if (navBarNavClasses.length > 0) {
              let navClassResultArr = navBarNavClasses
                ? navBarNavClasses.filter((e) =>
                    e.startsWith("flex-column") ? e.replace(e, "") : e
                  )
                : [];

              if (this.changed["alignment"] !== "GJS_NO_CLASS") {
                navClassResultArr.push(this.changed["alignment"]);
              }
              navBarNav[0].setClass(navClassResultArr);
            } else {
              if (this.changed["alignment"] !== "GJS_NO_CLASS") {
                navBarNav[0].setAttributes({
                  class: this.changed["alignment"],
                });
              }
            }
          }
        },
      },
      {
        isComponent(el) {
          if (el.getAttribute && el.getAttribute("data-gjs-type") === type) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.navbar_container, {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          "custom-name": opts.labels.labelNavbarContainer,
          name: opts.types.navbar_container,
          tagName: "div",
          classes: ["collapse", "navbar-collapse"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "", name: "Default" },
                {
                  value: "justify-content-start",
                  name: "Start",
                },
                {
                  value: "justify-content-center",
                  name: "Center",
                },
                {
                  value: "justify-content-end",
                  name: "End",
                },
                {
                  value: "justify-content-around",
                  name: "Around",
                },
                {
                  value: "justify-content-between",
                  name: "Between",
                },
              ],
              label: "Align Content",
              name: "align-content",
              changeProp: 1,
            },
          ].concat(defaultModel.prototype.defaults.traits),
          script: function () {},
        }),
        init() {
          this.listenTo(
            this,
            "change:align-content",
            this.updateNavigationAndItem
          );
        },
        updateNavigationAndItem() {
          let attrs = this.getAttributes();

          if (this.changed["align-content"]) {
            let classArr = attrs.class.split(" ");
            let resultArr = classArr.filter((e) =>
              e.startsWith("justify-content") ? e.replace(e, "") : e
            );
            resultArr.push(this.changed["align-content"]);
            attrs.class = resultArr.toString().replaceAll(",", " ");

            //Setting navbar-nav classes based on parent class.
            let navBarNav = this.findType(opts.types.navbar_nav);
            let navBarNavClasses = navBarNav[0].getClasses();

            if (navBarNavClasses.length > 0) {
              let navClassResultArr = navBarNavClasses
                ? navBarNavClasses.filter((e) =>
                    e.startsWith("justify-content") ? e.replace(e, "") : e
                  )
                : [];

              if (this.changed["align-content"] !== "GJS_NO_CLASS") {
                navClassResultArr.push(this.changed["align-content"]);
              }
              navBarNav[0].setClass(navClassResultArr);
            } else {
              if (this.changed["align-content"] !== "GJS_NO_CLASS") {
                navBarNav[0].setAttributes({
                  class: this.changed["align-content"],
                });
              }
            }
          }
        },
      },
      {
        isComponent(el) {
          if (
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === opts.types.navbar_container
          ) {
            return { type: opts.types.navbar_container };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.navbar_nav, {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          "custom-name": opts.labels.labelNavbarNavigation,
          tagName: "ul",
          classes: ["navbar-nav"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "", name: "Horizontal" },
                {
                  value: "flex-column",
                  name: "Vertical",
                },
              ],
              label: "Alignment",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        }),
      },
      {
        isComponent(el) {
          if (
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === opts.types.navbar_nav
          ) {
            return { type: opts.types.navbar_nav };
          }
        },
      }
    ),
    view: defaultView,
  });
  dc.addType(opts.types.nav_item, {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          "custom-name": opts.labels.labelNavItem,
          tagName: "li",
          classes: ["nav-item"],
          traits: [
            {
              type: "class_select",
              options: [
                { value: "", name: "No" },
                {
                  value: "active",
                  name: "Yes",
                },
              ],
              label: "Active",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        }),
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("nav-item")) {
            return { type: opts.types.nav_item };
          }
        },
      }
    ),
    view: defaultView,
  });
};
