import { useEffect, addons } from '@storybook/preview-api';
import Twig from 'twig';
import { setupTwig } from './setupTwig';
import { STORY_RENDERED } from '@storybook/core-events';

// DRUPAL JS
import './drupal.js';
import './once.global.js';

// GLOBAL CSS
import '../src/base/base.js';
import '../src/base/font-face/fontawesome.js';
import '../src/templates/site-layout/component/site-layout.js';
import '../src/templates/field/ckeditor/component/ckeditor.js';

// SITE MODES
import '../src/base/data-site-mode/at-work.js';
import '../src/base/data-site-mode/at-play.js';

// COLOR SCHEMES
import '../src/base/data-color-scheme/santa-monica--sunset.js';
import '../src/base/data-color-scheme/newport--pinata.js';
import '../src/base/data-color-scheme/south-beach--bubblegum.js';
import '../src/base/data-color-scheme/iceland--oxblood.js';

setupTwig(Twig);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  backgrounds: { disable: true },
  layout: 'none',
  options: {
    storySort: {
      method: "alphabetical",
      order: [
        "Foundation",
        "Content Types",
        "Taxonomy",
        "Components",
        "Site Layout"
      ]
    }
  }
};

export const decorators = [
  (storyFn) => {
    useEffect(() => Drupal.attachBehaviors(), []);
    return storyFn();
  }
];

export const globalTypes = {
  dataThemes: {
    defaultValue: {
      list: [
        { name: "At Work", dataTheme: "at-work", color: "#1d2d3c" },
        { name: "At Play", dataTheme: "at-play", color: "#eae7dc" },
      ],
      dataAttribute: "data-site-mode",
    },
  },
};

const channel = addons.getChannel();

// Set the site-header-height prop to 0 when not on the site-header component.
channel.on(STORY_RENDERED, (storyId) => {
  if (storyId !== 'site-layout-site-header--site-header') {
    document.documentElement.style.setProperty('--site-header-height', 0);
  }
});
