const prefix = "data-";
const attrTab = `${prefix}tab`;
const attrTabs = `${prefix}tabs`;
const attrTabContent = `${prefix}tab-content`;
const attrTabContainer = `${prefix}tab-container`;

export default {
  // Object to extend the default tabs block, eg. `{ label: 'Tabs', attributes: { ... } }`
  tabsBlock: {},

  // Object to extend the default tabs properties, eg. `{ name: 'My Tabs', droppable: false, ... }`
  tabsProps: {
    resizable: true,
  },

  // Object to extend the default tab properties
  tabProps: {},

  // Object to extend the default tab content properties
  tabContentProps: {},

  // Object to extend the default tab container properties
  tabContainerProps: {},

  // Tabs attribute identifier (main component)
  attrTabs,

  // Tab attribute identifier
  attrTab,

  // Tab content attribute identifier
  attrTabContent,

  // Tab container attribute identifier
  attrTabContainer,

  // Default class to use on tab
  classTab: "tab",

  // Class used on tabs when active
  classTabActive: "tab-active",

  // Default class to use on tab content
  classTabContent: "tab-content",

  // Default class to use on tab container
  classTabContainer: "tab-container",

  // The attribute used inside tabs as a selector for tab contents
  selectorTab: "href",

  // Default tabs template
  template: `
      <nav ${attrTabContainer}>
        <a href="#tab1" ${attrTab}> <div data-gjs-type="text" draggable="true" data-highlightable="1">Tab 1</div></a>
        <a href="#tab2" ${attrTab}> <div data-gjs-type="text" draggable="true" data-highlightable="1">Tab 2</div></a>
        <a href="#tab3" ${attrTab}> <div data-gjs-type="text" draggable="true" data-highlightable="1">Tab 3</div></a>
      </nav>
      <div id="tab1" ${attrTabContent}>
        <div>Tab 1 Content</div>
      </div>
      <div id="tab2" ${attrTabContent}>
        <div>Tab 2 Content</div>
      </div>
      <div id="tab3" ${attrTabContent}>
        <div>Tab 3 Content</div>
      </div>
    `,

  // Default template for new added tab contents
  templateTabContent: `<div>New Tab Content</div>`,

  style: `
      .tab {
        text-decoration: none;
        color: inherit;
        padding: 7px 14px;
        transition: opacity 0.3s;
        display: inline-block;
        border-radius: 3px;
        margin-right: 10px;
      }

      .tab-container{
        border-bottom: 1px solid #dee2e6;
      }

      .tab.tab-active {
        color: #495057;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
        border: 1px solid #dee2e6;
        border-bottom: 1px solid transparent;
        margin-bottom: -1rem;
      }

      .tab-content {
        padding: 6px 12px;
        min-height: 100px;
        animation: fadeEffect 1s;
      }
      
      @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
      }
    `,
};
