export const FooterBlock = (bm, category, label, type, opts) => {
  const footerStyle = `
  <style>
    ${type} {
      position:relative;
      font-weight:400;
      font-size:15px;
      width:100%;
      bottom:0;
      right: 0;
      left: 0;
      clear:both;
    }
    ul {
      padding:0;
      margin:0;
    }
    li {
      list-style:none;
    }
    a:focus,a:hover {
      text-decoration:none;
      -webkit-transition:.3s ease;
      -o-transition:.3s ease;
      transition:.3s ease;
    }
    a:focus {
      outline:0;
    }
    img {
      max-width:100%;
    }
    p {
      font-size:16px;
      line-height:30px;
      color:#363940;
      font-weight:300;
    }
    h4 {
      margin:0;
      font-weight:400;
      padding:0;
      color:#363940;
    }
    a {
      color:#007bff;
    }
    .no-padding {
      padding:0!important;
    }
    .${type}--absolute {
      position:absolute;
    }
    .${type}--relative {
      position:relative;
    }
    .${type}--static {
      position:static;
    }
    .${type}--fixed {
      position:fixed;
    }
    .${type}-big {
      padding:105px 0 65px 0;
      margin-top:1rem;
    }
    .${type}-big .${type}-widget {
      margin-bottom:40px;
    }
    .${type}--light {
      background:#e9ecef;
    }
    .${type}--dark {
      background:#363940;
    }
    .${type}-big .${type}-menu ul li a,.${type}-big p,.${type}-big ul li {
      color:#363940;
    }
    .${type}--dark h4,.${type}--dark .${type}-big p,.${type}--dark .${type}-menu ul li a,.${type}--dark .${type}-big ul li {
      color:#e9ecef;
    }
    .${type}-menu {
      padding-left:48px;
    }
    .${type}-menu ul li a {
      font-size:15px;
      line-height:32px;
      -webkit-transition:.3s;
      -o-transition:.3s;
      transition:.3s;
    }
    .${type}-menu ul li a:hover {
      color:#0056b3;
    }
    .${type}-menu--1 {
      width:100%;
    }
    .${type}-widget-title {
      line-height:42px;
      margin-bottom:10px;
      font-size:18px;
    }
    .mini-${type} {
      background:#192027;
      text-align:center;
      padding:32px 0;
    }
    .mini-${type} p {
      margin:0;
      line-height:26px;
      font-size:15px;
      color:#999;
    }
    .mini-${type} p a {
      color:#007bff;
    }
    .mini-${type} p a:hover {
      color:#34bfa3;
    }
    .widget-about img {
      display:block;
      margin-bottom:30px;
    }
    .widget-about p {
      font-weight:400;
    }
    .widget-about .contact-details {
      margin:30px 0 0 0;
    }
    .widget-about .contact-details li {
      margin-bottom:10px;
    }
    .widget-about .contact-details li:last-child {
      margin-bottom:0;
    }
    .widget-about .contact-details li span {
      padding-right:12px;
    }
    .widget-about .contact-details li a {
      color:#007bff;
    }
    @media (max-width:991px) {
      .${type}-menu {
        padding-left:0;
      }
    }   
  </style>
  `;

  let footerItem = `
  <div class="footer-big" data-gjs-custom-name="${opts.labels.labelFooterBigContainer}">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-sm-12">
          <div class="footer-widget" data-gjs-custom-name="${opts.labels.labelFooterWidget}">
            <div class="widget-about" data-gjs-custom-name="${opts.labels.labelFooterWidgetAbout}">
              <img src="https://picsum.photos/250/80" alt="Image" class="img-fluid">
              <p>We are a young company always looking for new and creative ideas to help you with our products in your everyday work.</p>
              <ul class="contact-details" data-gjs-custom-name="${opts.labels.labelFooterContact}">
                <li>
                  <span class="icon-earphones"></span> Call Us:
                  <a href="tel:XXX-XXX-XXX">XXX-XXX-XXX</a>
                </li>
                <li>
                  <span class="icon-envelope-open"></span>
                  <a href="mailto:support@drapcode.com">support@drapcode.com</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-4">
          <div class="footer-widget" data-gjs-custom-name="${opts.labels.labelFooterWidget}">
            <div class="footer-menu footer-menu--1" data-gjs-custom-name="${opts.labels.labelFooterMenu}">
              <h4 class="footer-widget-title">Popular Category</h4>
              <ul>
                <li>
                  <a href="#">Category #1</a>
                </li>
                <li>
                  <a href="#">Category #2</a>
                </li>
                <li>
                  <a href="#">Category #3</a>
                </li>
                <li>
                  <a href="#">Category #4</a>
                </li>
                <li>
                  <a href="#">Category #5</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-4">
          <div class="footer-widget" data-gjs-custom-name="${opts.labels.labelFooterWidget}">
            <div class="footer-menu" data-gjs-custom-name="${opts.labels.labelFooterMenu}">
              <h4 class="footer-widget-title">Our Company</h4>
              <ul>
                <li>
                  <a href="#">About Us</a>
                </li>
                <li>
                  <a href="#">How It Works</a>
                </li>
                <li>
                  <a href="#">Testimonials</a>
                </li>
                <li>
                  <a href="#">Contact Us</a>
                </li>
                <li>
                  <a href="#">Blog</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-4">
          <div class="footer-widget" data-gjs-custom-name="${opts.labels.labelFooterWidget}">
            <div class="footer-menu no-padding" data-gjs-custom-name="${opts.labels.labelFooterMenu}">
              <h4 class="footer-widget-title">Help Support</h4>
              <ul>
                <li>
                  <a href="#">Support Forum</a>
                </li>
                <li>
                  <a href="#">Terms &amp; Conditions</a>
                </li>
                <li>
                  <a href="#">Support Policy</a>
                </li>
                <li>
                  <a href="#">FAQs</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mini-footer" data-gjs-custom-name="${opts.labels.labelMiniFooter}">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="copyright-text" data-gjs-custom-name="${opts.labels.labelFooterCopyright}">
            <p>Copyright 2020
              <a href="#">DrapCode</a>. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>`;

  let footer = `
    <footer class="footer-area footer--light footer--relative">
      ${footerItem}
    </footer>`;

  bm.add("footer", {
    label,
    category: category,
    content: `${footer}${footerStyle}`,
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six"> <svg viewBox="0 0 24 24" width="32" height="50" xmlns="http://www.w3.org/2000/svg"><g><path d="m21 0h-18c-1.654 0-3 1.346-3 3v18c0 1.654 1.346 3 3 3h18c1.654 0 3-1.346 3-3v-18c0-1.654-1.346-3-3-3zm1 21c0 .552-.448 1-1 1h-18c-.552 0-1-.448-1-1v-18c0-.552.448-1 1-1h18c.552 0 1 .448 1 1z"/><path d="m18.25 13h-12.5c-.965 0-1.75.785-1.75 1.75v3.5c0 .965.785 1.75 1.75 1.75h12.5c.965 0 1.75-.785 1.75-1.75v-3.5c0-.965-.785-1.75-1.75-1.75z"/></g></svg></div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/layout-component-footer"
          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("footer", {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": label,
          tagName: "footer",
          classes: ["footer-area"],
          resizable: true,
          traits: [
            {
              type: "class_select",
              options: [
                { value: "footer--light", name: "Light" },
                { value: "footer--dark", name: "Dark" },
              ],
              label: "Theme",
            },
            {
              type: "class_select",
              options: [
                { value: "footer--absolute", name: "Absolute" },
                { value: "footer--fixed", name: "Fixed" },
                { value: "footer--relative", name: "Relative" },
                { value: "footer--static", name: "Static" },
              ],
              label: "Position",
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("footer-area")) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
};
