import { configure, addParameters, addDecorator } from '@storybook/ember';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import theme from './theme.js';
import flightIconSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite-module';

function loadStories() {
  // automatically import all files ending in *.stories.js
  const appStories = require.context('../stories', true, /.stories.js$/);
  const addonAndRepoStories = require.context('../lib', true, /.stories.js$/);
  appStories.keys().forEach((filename) => appStories(filename));
  addonAndRepoStories.keys().forEach((filename) => addonAndRepoStories(filename));
}

addParameters({
  viewport: { viewports: INITIAL_VIEWPORTS },
  options: { theme },
});

addDecorator((storyFn) => {
  const { template, context } = storyFn();

  // flight icon sprite must be inserted into dom for icon lookup via use element
  document.getElementById('root').insertAdjacentHTML('afterbegin', flightIconSprite.trim());

  // This adds styling to the Canvas tab.
  const styles = {
    style: {
      margin: '20px',
    },
  };

  // Create a div to wrap the Canvas tab with the applied styles.
  const element = document.createElement('div');
  Object.assign(element.style, styles.style);

  const innerElement = document.createElement('div');
  const wormhole = document.createElement('div');
  wormhole.setAttribute('id', 'ember-basic-dropdown-wormhole');
  innerElement.appendChild(wormhole);

  element.appendChild(innerElement);
  innerElement.appendTo = function appendTo(el) {
    el.appendChild(element);
  };

  return {
    template,
    context,
    element: innerElement,
  };
});

configure(loadStories, module);