import '../../node_modules/gatsby-core-theme/gatsby-browser';
require('../src/gatsby-core-theme/styles/utils/variables/_colors.scss');
require('../src/gatsby-core-theme/styles/utils/variables/_main.scss');
import React from 'react';

global.___loader = {
  enqueue: () => {},
  hovering: () => {},
};

global.__PATH_PREFIX__ = '';
global.__BASE_PATH__ = '';

window.___navigate = (pathname) => {
  action('NavigateTo:')(pathname);
};

export const parameters = {
  controls: { expanded: true },
  actions: { argTypesRegex: '^on[A-Z].*' },
  options: {
    storySort: {
      method: 'alphabetical',
      order: [
        'Theme',
        [
          'Layout',
          [
            'Navigation',
            'Header',
            [
              'Default',
              'Author',
              ['Template One', 'Template Two', 'Template Three', 'Template Four'],
              'Operator',
              ['Template One-Two', 'Template Three', 'Template Four', 'Template Five'],
              'Games',
              'Payment',
              ['Template One-Three', 'Template Two', 'Template Four'],
            ],
            'Footer',
            ['Template One', 'Template Two', 'Template Three'],
          ],
          'Modules',
          [
            'Anchor',
            'Toplist',
            'Cards',
            [
              'Layout',
              'Game',
              ['Template One', 'Template Two', 'Template Three', 'Template Four', 'Template Five'],
              'Operator',
              ['Template One', 'Template Two', 'Template Three', 'Template Four'],
              'Payments',
              ['Template One', 'Template Two', 'Template Three'],
            ],
            'Content',
            [
              'Common',
              ['Text and Images', ['Text', 'Show More Text', '*'], '*'],
              'Template One',
              'Template Two',
              'Template Three',
            ],
          ],
          'Atoms',
          'Molecules',
          'Organisms',
          'Pages',
          'Hooks',
        ],
      ],
    },
  },
};

// Global decorators for stories
export const decorators = [
  (Story) => (
    <div style={{ margin: '1.5rem auto 0', fontFamily: 'Plus Jakarta Sans' }}>
      <link rel="preconnect" href="https://fonts.googleapis.com"></link>
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></link>
      <link
        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap"
        rel="stylesheet"
      ></link>
      <Story />
    </div>
  ),
];
