import grapesjs from "drapcode-builder";
import loadAssets from "./assets.js";
import loadComponents from "./components";
import loadTraits from "./traits";
import loadCommands from "./commands";
import {
  defaultSectionsMap,
  drapcodeSectionRef,
} from "./components/sections/constants.js";
import {
  defaultCarouselsMap,
  drapcodeCarouselRef,
} from "./components/carousel/constants.js";
import {
  defaultCardsMap,
  drapcodeCardRef,
} from "./components/cards/constants.js";

const loadCss = (editor) => {
  editor.Config.canvasCss += `
    /* Layout */
    #wrapper{width:100%!important;position:inherit!important}
    [data-gjs-type=wrapper]{width:100%;!important}
    .gjs-dashed .container, .gjs-dashed .container-fluid,
    .gjs-dashed .row,
    .gjs-dashed .col, .gjs-dashed [class^="col-"] {
      min-height: 1.5rem;
    }
    .gjs-dashed .w-100 {
      min-height: .25rem !important;
      background-color: rgba(0,0,0,0.1);
    }
    .gjs-dashed img {
      min-width: 25px;
      min-height: 25px;
      background-color: rgba(0,0,0,0.5);
    }
    /* Components */
    .gjs-dashed .btn-group,
    .gjs-dashed .btn-toolbar {
      padding-right: 1.5rem !important;
      min-height: 1.5rem !important;
    }
    .gjs-dashed .card,
    .gjs-dashed .card-group, .gjs-dashed .card-deck, .gjs-dashed .card-columns {
      min-height: 1.5rem !important;
    }
    .gjs-dashed .collapse {
      display: block !important;
      min-height: 1.5rem !important;
    }
    .gjs-dashed .dropdown {
      display: block !important;
      min-height: 1.5rem !important;
    }
    .gjs-dashed .dropdown-menu {
      min-height: 1.5rem !important;
      display: block !important;
    }
  `;
};

export default grapesjs.plugins.add(
  "bootstrap4-blocks",
  (editor, opts = {}) => {
    const default_blocks = {
      button: true,
      card: true,
      card_full: true,
      card_image: true,
      container: true,
      row: true,
      column: true,
      media_object: true,
      column_break: true,
      text: true,
      image: true,
      video: true,
      audio: true,
      header: true,
      paragraph: true,
      input: true,
      form_group_input: true,
      input_group: true,
      textarea: true,
      select: true,
      label: true,
      checkbox: true,
      radio: true,
      tabs: true,
      badge: true,
      list: false,
      grid: false,
      navbar_old: false,
      navbar: true,
      nav_item_submenu: true,
      jumbotron: true,
      list_group: true,
      side_bar: true,
      accordions: true,
      carousel: false,
      footer: true,
      modal: true,
      facebook_button: true,
      google_button: true,
      sections: true,
      sections: true,
      cards: true,
      linkBox: true,
      horizontalLine: true,
      verticalLine: true,
      box: true,
      table: false,
      breadcrumb: true,
      iframe: true,
      pagePlaceholder: true,
    };

    const default_types = {
      button: "bootstrap_button",
      card: "card",
      card_full: "card-full",
      card_image: "card-image",
      container: "container",
      row: "row",
      column: "column",
      badge: "badge",
      column_break: "column_break",
      media_object: "media_object",
      text: "text",
      image: "bs-image",
      video: "bs-video",
      audio: "bs-audio",
      header: "header",
      paragraph: "paragraph",
      input: "input",
      file_input: "file",
      form_group_input: "form-group",
      input_group: "input-group",
      textarea: "textarea",
      select: "select",
      select_option: "- Select option -",
      option: "option",
      label: "label",
      checkbox: "checkbox",
      radio: "radio",
      list: "list",
      grid: "grid",
      navbar_old: "navbar_old",
      navbar: "navbar",
      navbar_container: "navbar-container",
      navbar_nav: "navbar-nav",
      nav_item_dropdown: "navbar_item_dropdown",
      nav_item_dropdown_menu: "navbar_item_dropdown_menu",
      nav_item_dropdown_toggle: "navbar_item_dropdown_toggle",
      nav_item: "nav-item",
      burgerType: "burger-menu",
      jumbotron: "jumbotron",
      list_group: "list-group",
      side_bar: "sidebar",
      tabs: "tabs",
      tab: "tab",
      tab_container: "tab-container",
      tab_content: "tab-content",
      accordions: "accordions",
      accordion: "accordion",
      accordion_container: "accordion-container",
      accordion_content: "accordion-content",
      sliders: "sliders",
      slider: "slider",
      slides: "slides",
      slide: "slide",
      nav_prev: "nav-prev",
      nav_next: "nav-next",
      slider_frame: "slider-frame",
      footer: "footer",
      modal: "modal",
      modal_dialog: "modal-dialog",
      modal_content: "modal-content",
      modal_header: "modal-header",
      modal_title: "modal-title",
      modal_body: "modal-body",
      modal_footer: "modal-footer",
      facebook_button: "facebook-button",
      google_button: "google-button",
      sections: drapcodeSectionRef,
      carousels: drapcodeCarouselRef,
      cards: drapcodeCardRef,
      link_box: "link-box",
      horizontal_line: "horizontal-line",
      vertical_line: "vertical-line",
      box: "box",
      table: "table",
      breadcrumb: "main-beadcrumb",
      iframe: "iframe",
      pagePlaceholder: "pagePlaceholder",
    };

    const default_labels = {
      button: "Button",
      card: "Card",
      card_full: "Full Card",
      card_image: "Image Card",
      container: "Container",
      row: "Row",
      column: "Column",
      column_break: "Column Break",
      media_object: "Media Object",
      text: "Text",
      image: "Image",
      video: "Video",
      audio: "Audio",
      header: "Heading",
      paragraph: "Paragraph",
      input: "Input",
      file_input: "File",
      form_group_input: "Form Group",
      input_group: "Input Group",
      textarea: "Textarea",
      select: "Select",
      select_option: "- Select option -",
      option: "Option",
      label: "Label",
      checkbox: "Checkbox",
      radio: "Radio",
      alert: "Alert",
      tabs: "Tabs",
      tab: "Tab",
      tab_container: "Tab Container",
      tab_content: "Tab Content",
      badge: "Badge",
      button_group: "Button Group",
      button_toolbar: "Button Toolbar",
      card_container: "Card Container",
      collapse: "Collapse",
      dropdown: "Dropdown",
      dropdown_menu: "Dropdown Menu",
      dropdown_item: "Dropdown Item",
      list: "List",
      grid: "Grid",
      navbar_old: "Navbar",
      navbar: "Navbar",
      labelNavbarContainer: "Navbar Container",
      labelNavbarNavigation: "Navbar Navigation",
      labelNavItem: "Navigation Item",
      labelNavItemSubMenu: "Sub Menu",
      labelNavItemSubMenuToggle: "Sub Menu Toggle",
      labelNavItemDropdownMenu: "Dropdown Menu",
      labelBurger: "Burger",
      labelBurgerLine: "Burger Line",
      labelHome: "Home",
      labelAbout: "About",
      labelContact: "Contact",
      labelMenu: "Navbar Menu",
      labelMenuLink: "Menu link",
      trait_id: "ID",
      trait_for: "For",
      trait_name: "Name",
      trait_placeholder: "Placeholder",
      trait_value: "Value",
      trait_required: "Required",
      trait_type: "Type",
      trait_options: "Options",
      trait_checked: "Checked",
      jumbotron: "Jumbotron",
      list_group: "List Group",
      side_bar: "Side Bar",
      accordions: "Accordions",
      accordion: "Accordion",
      accordion_container: "Accordion Container",
      accordion_content: "Accordion Content",
      sliders: "Carousel",
      slider: "Carousel Slider",
      slides: "Carousel Slides",
      slide: "Carousel Slide",
      nav_prev: "Nav Prev",
      nav_next: "Nav Next",
      slider_frame: "Carousel Frame",
      footer: "Footer",
      labelFooterBigContainer: "Footer Big",
      labelFooterWidget: "Footer Widget",
      labelFooterWidgetAbout: "Widget About",
      labelFooterContact: "Contact Details",
      labelFooterMenu: "Footer Menu",
      labelMiniFooter: "Mini Footer",
      labelFooterCopyright: "Copyright",
      modal: "Modal",
      modal_dialog: "Modal Dialog",
      modal_content: "Modal Content",
      modal_header: "Modal Header",
      modal_title: "Modal Title",
      modal_body: "Modal Body",
      modal_footer: "Modal Footer",
      facebook_button: "Facebook Button",
      google_button: "Google Button",
      sections: "Sections",
      drapcode_sections_custom_code: "Sections Custom Code",
      carousels: "Carousels",
      drapcode_carousels_custom_code: "Carousels Custom Code",
      cards: "Cards",
      drapcode_cards_custom_code: "Cards Custom Code",
      link_box: "Link Box",
      horizontal_line: "Horizontal Line",
      vertical_line: "Vertical Line",
      box: "Box",
      table: "Table",
      breadcrumb: "Breadcrumb",
      iframe: "Iframe",
      pagePlaceholder: "Page Placeholder",
    };

    const default_commands = {
      button: "bootstrap_button:open-modal",
      card: "card:open-modal",
      drapcode_sections_custom_code: "drapcode-sections:open-modal",
      drapcode_carousels_custom_code: "drapcode-carousels:open-modal",
      drapcode_cards_custom_code: "drapcode-cards:open-modal",
    };

    const default_refs = {
      hNavbarRef: "h-navbar",
      navbarRef: "navbar",
      navbarItemsRef: "navbar-items",
      menuRef: "navbar-menu",
      drapcodeSectionRef: drapcodeSectionRef,
      keyDrapCodeSectionsCustomCode: drapcodeSectionRef + "__code",
      drapcodeCarouselRef: drapcodeCarouselRef,
      keyDrapCodeCarouselsCustomCode: drapcodeCarouselRef + "__code",
      drapcodeCardRef: drapcodeCardRef,
      keyDrapCodeCardsCustomCode: drapcodeCardRef + "__code",
    };

    let options = {
      ...{
        blocks: default_blocks,
        labels: default_labels,
        types: default_types,
        commands: default_commands,
        refs: default_refs,
        optionsStringSeparator: "::",
        labelWebConnectBasicCategory: "Basic",
        labelWebConnectFormCategory: "Forms",
        labelWebConnectAdvancedCategory: "Advanced",
        labelWebConnectSocialCategory: "Social",
        labelWebConnectLayoutCategory: "Layout",
        labelWebConnectMediaCategory: "Media",
        labelWebConnectTypographyCategory: "Typography",
        // Sections Defaults
        pfxSections: "dc-sections",
        sections: defaultSectionsMap,
        blockDrapCodeSectionsSectionCode: {},
        propsDrapCodeSectionsSectionCode: {},
        sectionsPlaceholderContent: `
        <div class='container'>
          <div class='row'>
            <div class='col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'></div>
          </div>
        </div>`,
        toolbarBtnDrapCodeSectionsSectionCode: {},
        sectionsPlaceholderScript: `<div style="pointer-events: none; padding: 10px;">
        <svg viewBox="0 0 24 24" style="height: 30px; vertical-align: middle;">
          <path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"></path>
          </svg>
          Section with <i>&lt;script&gt;</i> can't be rendered on the canvas
        </div>`,
        sectionsModalTitle: "Sections",
        sectionsCodeViewOptions: {},
        commandDrapCodeSectionsSectionCode: {},

        // Carousels Defaults
        pfxCarousels: "dc-carousels",
        carousels: defaultCarouselsMap,
        blockDrapCodeCarouselsCarouselCode: {},
        propsDrapCodeCarouselsCarouselCode: {},
        carouselsPlaceholderContent: `
        <div id="dc-carousel-default" class="carousel slide" data-ride="carousel" data-gjs-type="carousel-container" data-gjs-custom-name="Carousel Conatiner">
          <div class="carousel-inner" data-gjs-type="carousel-inner" data-gjs-custom-name="Carousel Inner">
            <div class="carousel-item active" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
              <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="First slide">
            </div>
            <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
              <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Second slide">
            </div>
            <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
              <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Third slide">
            </div>
          </div>
        </div>`,
        toolbarBtnDrapCodeCarouselsCarouselCode: {},
        carouselsPlaceholderScript: `<div style="pointer-events: none; padding: 10px;">
        <svg viewBox="0 0 24 24" style="height: 30px; vertical-align: middle;">
          <path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"></path>
          </svg>
          Carousel with <i>&lt;script&gt;</i> can't be rendered on the canvas
        </div>`,
        carouselsModalTitle: "Carousels",
        carouselsCodeViewOptions: {},
        commandDrapCodeCarouselsCarouselCode: {},

        // Cards Defaults
        pfxCards: "dc-cards",
        cards: defaultCardsMap,
        blockDrapCodeCardsCardCode: {},
        propsDrapCodeCardsCardCode: {},
        cardsPlaceholderContent: `
        <div id="dc-card-default" class="card" data-gjs-type="card">
          <div class="card-body" data-gjs-type="card-body">
            <h5 class="card-title">Card title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>`,
        toolbarBtnDrapCodeCardsCardCode: {},
        cardsPlaceholderScript: `<div style="pointer-events: none; padding: 10px;">
        <svg viewBox="0 0 24 24" style="height: 30px; vertical-align: middle;">
          <path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"></path>
          </svg>
          Card with <i>&lt;script&gt;</i> can't be rendered on the canvas
        </div>`,
        cardsModalTitle: "Cards",
        cardsCodeViewOptions: {},
        commandDrapCodeCardsCardCode: {},
      },
      ...opts,
    };

    for (let name in options) {
      if (!(name in opts)) opts[name] = options[name];
    }
    loadAssets(editor, opts);
    loadCommands(editor, opts);
    loadTraits(editor, opts);
    // loadBlocks(editor, opts);
    loadComponents(editor, opts);
    loadCss(editor, options);
  }
);
