import { DemoDropdownBasicComponent } from './demos/basic/basic';
import { DemoDropdownBasicLinkComponent } from './demos/basic/basic-link';
import { DemoDropdownSplitComponent } from './demos/split/split';
import { DemoDropdownTriggersManualComponent } from './demos/triggers-manual/triggers-manual';
import { DemoDropdownDisabledComponent } from './demos/disabled-menu/disabled-menu';
import { DemoDropdownDisabledItemComponent } from './demos/disabled-item/disabled-item';
import { DemoDropdownAlignmentComponent } from './demos/alignment/menu-alignment';
import { DemoNestedDropdownsComponent } from './demos/nested-dropdowns/nested-dropdowns';
import { DemoDropdownContainerComponent } from './demos/container/container';
import { DemoDropdownKeyboardComponent } from './demos/keyboard/keyboard';
import { DemoDropdownDropupComponent } from './demos/dropup/dropup';
import { DemoDropdownMenuDividersComponent } from './demos/menu-dividers/menu-dividers';
import { DemoDropdownConfigComponent } from './demos/config/config';
import { DemoDropdownVisibilityEventsComponent } from './demos/visibility-events/visibility-events';
import { DemoDropdownStateChangeEventComponent } from './demos/state-change-event/state-change-event';
import { DemoDropdownAutoCloseComponent } from './demos/autoclose/autoclose';
import { DemoDropdownCustomHtmlComponent } from './demos/custom-html/custom-html';
import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';

import { ContentSection } from '../../docs/models/content-section.model';
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';

import {
  NgApiDocComponent,
  NgApiDocConfigComponent
} from '../../docs/api-docs';


export const demoComponentContent: ContentSection[] = [
  {
    name: 'Usage',
    anchor: 'usage',
    outlet: DemoTopSectionComponent,
    content: {
      doc: require('!!raw-loader?lang=typescript!./docs/usage.md')
    }
  },
  {
    name: 'Examples',
    anchor: 'examples',
    outlet: ExamplesComponent,
    description: `<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
      <code>dropdown</code>. Dropdowns can be triggered from <code> &lt;a&gt;</code> or <code> &lt;button&gt;</code>
      elements to better fit your potential needs.</p>`,
    content: [
      {
        title: 'Basic',
        anchor: 'basic',
        component: require('!!raw-loader?lang=typescript!./demos/basic/basic.ts'),
        html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
        description: `<p>Any <code>&lt;button&gt;</code> can became a dropdown toggle with few markup changes.
          Here’s how dropdown works with single button</p>`,
        outlet: DemoDropdownBasicComponent
      },
      {
        title: 'Trigger by tag <a>',
        anchor: 'link-button',
        component: require('!!raw-loader?lang=typescript!./demos/basic/basic-link.ts'),
        html: require('!!raw-loader?lang=markup!./demos/basic/basic-link.html'),
        outlet: DemoDropdownBasicLinkComponent
      },
      {
        title: 'Split button dropdowns',
        anchor: 'split-button',
        component: require('!!raw-loader?lang=typescript!./demos/split/split.ts'),
        html: require('!!raw-loader?lang=markup!./demos/split/split.html'),
        description: `<p>Similarly, create split button dropdowns with virtually the same markup as single
          button dropdowns, but with the addition of <code>.dropdown-toggle-split</code> for proper spacing
          around the dropdown caret.</p>`,
        outlet: DemoDropdownSplitComponent
      },
      {
        title: 'Manual triggers',
        anchor: 'triggers-manual',
        component: require('!!raw-loader?lang=typescript!./demos/triggers-manual/triggers-manual.ts'),
        html: require('!!raw-loader?lang=markup!./demos/triggers-manual/triggers-manual.html'),
        description: `<p>Dropdown can be triggered in two ways:
          <ul>
            <li>by toggling <code>isOpen</code> property</li>
            <li>by <code>show</code>/<code>hide</code> methods from directive</li>
          </ul></p>`,
        outlet: DemoDropdownTriggersManualComponent
      },
      {
        title: 'Disabled menu',
        anchor: 'disabled-menu',
        component: require('!!raw-loader?lang=typescript!./demos/disabled-menu/disabled-menu.ts'),
        html: require('!!raw-loader?lang=markup!./demos/disabled-menu/disabled-menu.html'),
        description: `<p>Use <code>isDisabled</code> property to make dropdown disabled.</p>`,
        outlet: DemoDropdownDisabledComponent
      },
      {
        title: 'Mark item as disabled',
        anchor: 'disabled-item',
        component: require('!!raw-loader?lang=typescript!./demos/disabled-item/disabled-item.ts'),
        html: require('!!raw-loader?lang=markup!./demos/disabled-item/disabled-item.html'),
        description: `<p>Add a <code>disabled</code> class to <code>&lt;a&gt;</code> for bootstrap 4 to make it as disabled.</p>
                      <p>Add a <code>disabled</code> class to <code>&lt;li&gt;</code>  for bootstrap 3 to make as it disabled.</p>`,
        outlet: DemoDropdownDisabledItemComponent
      },
      {
        title: 'Menu alignment',
        anchor: 'menu-alignment',
        component: require('!!raw-loader?lang=typescript!./demos/alignment/menu-alignment.ts'),
        html: require('!!raw-loader?lang=markup!./demos/alignment/menu-alignment.html'),
        description: `<p>By default, a dropdown menu is automatically positioned 100% from the top and along
          the left side of its parent. Add class <code>.dropdown-menu-right</code> to a <code>dropdownMenu</code>
          to right align the dropdown menu.</p>`,
        outlet: DemoDropdownAlignmentComponent
      },
      {
        title: 'Nested dropdowns (experimental)',
        anchor: 'nested-dropdowns',
        component: require('!!raw-loader?lang=typescript!./demos/nested-dropdowns/nested-dropdowns.ts'),
        html: require('!!raw-loader?lang=markup!./demos/nested-dropdowns/nested-dropdowns.html'),
        outlet: DemoNestedDropdownsComponent
      },
      {
        title: 'Append to body',
        anchor: 'container',
        component: require('!!raw-loader?lang=typescript!./demos/container/container.ts'),
        html: require('!!raw-loader?lang=markup!./demos/container/container.html'),
        description: `<p>Append dropdown to body by adding <code>container="body"</code> to the parent element.</p>`,
        outlet: DemoDropdownContainerComponent
      },
      /* not availavle in bs-dropdown version
      {
        title: 'Single button with keyboard nav',
        anchor: 'dropdown-keyboard',
        component: require('!!raw-loader?lang=typescript!./demos/keyboard/keyboard.ts'),
        html: require('!!raw-loader?lang=markup!./demos/keyboard/keyboard.html'),
        outlet: DemoDropdownKeyboardComponent
      },*/
      {
        title: 'Dropup variation',
        anchor: 'dropup',
        component: require('!!raw-loader?lang=typescript!./demos/dropup/dropup.ts'),
        html: require('!!raw-loader?lang=markup!./demos/dropup/dropup.html'),
        description: `<p>To make dropdown's menu appear above toggle element set <code>dropup</code> property as <code>true</code></p>`,
        outlet: DemoDropdownDropupComponent
      },
      {
        title: 'Menu dividers',
        anchor: 'menu-dividers',
        component: require('!!raw-loader?lang=typescript!./demos/menu-dividers/menu-dividers.ts'),
        html: require('!!raw-loader?lang=markup!./demos/menu-dividers/menu-dividers.html'),
        description: `<p>Separate groups of related menu items with a <code>.divider</code> for bootstrap 3 and <code>.dropdown-divider</code> for bootstrap 4.</p>`,
        outlet: DemoDropdownMenuDividersComponent
      },
      {
        title: 'Custom html',
        anchor: 'custom-html',
        component: require('!!raw-loader?lang=typescript!./demos/custom-html/custom-html.ts'),
        html: require('!!raw-loader?lang=markup!./demos/custom-html/custom-html.html'),
        description: `<p>Dropdown allows you to use any html markup inside of it</p>`,
        outlet: DemoDropdownCustomHtmlComponent
      },
      {
        title: 'Configuring defaults',
        anchor: 'config-defaults',
        component: require('!!raw-loader?lang=typescript!./demos/config/config.ts'),
        html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
        description: `<p>It is possible to override default dropdown config partially or completely.</p>`,
        outlet: DemoDropdownConfigComponent
      },
      {
        title: 'Visibility Events',
        anchor: 'visibility-events',
        component: require('!!raw-loader?lang=typescript!./demos/visibility-events/visibility-events.ts'),
        html: require('!!raw-loader?lang=markup!./demos/visibility-events/visibility-events.html'),
        description: `<p>You can subscribe to dropdown's visibility events</p>`,
        outlet: DemoDropdownVisibilityEventsComponent
      },
      {
        title: 'State change event',
        anchor: 'state-change-event',
        component: require('!!raw-loader?lang=typescript!./demos/state-change-event/state-change-event.ts'),
        html: require('!!raw-loader?lang=markup!./demos/state-change-event/state-change-event.html'),
        description: `<p>You can subscribe to dropdown's state change event (<code>isOpenChange</code>).</p>`,
        outlet: DemoDropdownStateChangeEventComponent
      },
      {
        title: 'Auto close',
        anchor: 'autoclose',
        component: require('!!raw-loader?lang=typescript!./demos/autoclose/autoclose.ts'),
        html: require('!!raw-loader?lang=markup!./demos/autoclose/autoclose.html'),
        description: `<p>Use <code>autoClose</code> property to change dropdown's default behavior</p>`,
        outlet: DemoDropdownAutoCloseComponent
      },
      {
        title: 'Accessibility',
        anchor: 'accessibility',
        outlet: DemoAccessibilityComponent
      }
    ]
  },
  {
    name: 'API Reference',
    anchor: 'api-reference',
    outlet: ApiSectionsComponent,
    content: [
      {
        title: 'BsDropdownDirective',
        anchor: 'dropdown-directive',
        outlet: NgApiDocComponent
      },
      {
        title: 'BsDropdownContainerComponent',
        anchor: 'dropdown-container',
        outlet: NgApiDocComponent
      },
      {
        title: 'BsDropdownMenuDirective',
        anchor: 'dropdown-menu-directive',
        outlet: NgApiDocComponent
      },
      {
        title: 'BsDropdownToggleDirective',
        anchor: 'dropdown-toggle-directive',
        outlet: NgApiDocComponent
      },
      {
        title: 'BsDropdownState',
        anchor: 'BsDropdownState',
        outlet: NgApiDocConfigComponent
      },
      {
        title: 'BsDropdownConfig',
        anchor: 'dropdown-config',
        outlet: NgApiDocConfigComponent
      }
    ]
  }
];