const prefix = "data-";
const attrAccordion = `${prefix}accordion`;
const attrAccordions = `${prefix}accordions`;
const attrAccordionContent = `${prefix}accordion-content`;
const attrAccordionContainer = `${prefix}accordion-container`;

export default {
  // Object to extend the default accordions block, eg. `{ label: 'Accordions', attributes: { ... } }`
  accordionsBlock: {},

  // Object to extend the default accordions properties, eg. `{ name: 'My Accordions', droppable: false, ... }`
  accordionsProps: {
    resizable: true,
  },

  // Object to extend the default accordion properties
  accordionProps: {},

  // Object to extend the default accordion content properties
  accordionContentProps: {},

  // Object to extend the default accordion container properties
  accordionContainerProps: {},

  // Accordions attribute identifier (main component)
  attrAccordions,

  // Accordion attribute identifier
  attrAccordion,

  // Accordion content attribute identifier
  attrAccordionContent,

  // Accordion container attribute identifier
  attrAccordionContainer,

  // Default class to use on accordion
  classAccordion: "accordion",

  // Class used on accordions when active
  classAccordionActive: "accordion-active",

  // Default class to use on accordion content
  classAccordionContent: "accordion-content",

  // Default class to use on accordion container
  classAccordionContainer: "accordion-container",

  // The attribute used inside accordions as a selector for accordion contents
  selectorAccordion: "href",

  // Default accordions template
  template: `
      <div ${attrAccordionContainer}>
        <a href="#accordion1" ${attrAccordion}>
          <div data-gjs-type="text" draggable="true" data-highlightable="1">Accordion 1</div>
        </a>
        <div id="accordion1" ${attrAccordionContent}>
          <div>Accordion 1 Content</div>
        </div>
      </div>
      <div ${attrAccordionContainer}>
        <a href="#accordion2" ${attrAccordion}>
          <div data-gjs-type="text" draggable="true" data-highlightable="1">Accordion 2</div>
        </a>
        <div id="accordion2" ${attrAccordionContent}>
          <div>Accordion 2 Content</div>
        </div>      
      </div>
      <div ${attrAccordionContainer}>
        <a href="#accordion3" ${attrAccordion}>
         <div data-gjs-type="text" draggable="true" data-highlightable="1">Accordion 3</div>
        </a>
        <div id="accordion3" ${attrAccordionContent}>
          <div>Accordion 3 Content</div>
        </div>
      </div>
    `,

  // Default template for new added accordion contents
  templateAccordionContent: `<div>New Accordion Content</div>`,

  style: `
      .accordion {
        text-decoration: none;
        color: inherit;
        padding: 7px 14px;
        transition: opacity 0.3s;
        display: block;
        border-radius: 3px;
        background-color: #eee;
        margin-top: 5px;
      }
      .accordion:hover {
        text-decoration: none;
      }

      .accordion-content {
        display: none;
        padding: 6px 12px;
        min-height: 100px;
        border: solid 1px #eee;
      }

    `,
};
