import { Preview } from '@storybook/react-vite';
import { withRootProvider } from './decorators/withRootProvider';
import { intlGlobals, intlLoader, withIntlProvider } from './decorators/withIntlProvider';
import { PreventIframeFromScrollingParent } from './decorators/preventIframeFromScrollingParent';
import { RootProvider } from '@preply/ds-web-root';
import { DocsContainer as StorybookDocsContainer } from '@storybook/addon-docs/blocks';
import { IntlProvider } from 'react-intl';
import React from 'react';
import { resetAllMocks } from 'storybook/test';

import '@preply/ds-static-assets/src/global.css';

const viewports = {
    default: {
        name: '_ (320 x 600)',
        styles: {
            width: '320px',
            height: '600px',
        },
    },
    'narrow-l': {
        name: 'narrow-l (400 x 800)',
        styles: {
            width: '400px',
            height: '800px',
        },
    },
    'medium-s': {
        name: 'medium-s (700 x 1200)',
        styles: {
            width: '700px',
            height: '1200px',
        },
    },
    'medium-l': {
        name: 'medium-l (880 x 1400)',
        styles: {
            width: '880px',
            height: '1400px',
        },
    },
    'wide-s': {
        name: 'wide-s (1200 x 800)',
        styles: {
            width: '1200px',
            height: '800px',
        },
    },
    'wide-l': {
        name: 'wide-l (1900 x 1200)',
        styles: {
            width: '1900px',
            height: '1200px',
        },
    },
};

function DocsContainer({
    children,
    ...props
}: React.ComponentProps<typeof StorybookDocsContainer>) {
    return (
        <RootProvider theme="tokyo-ui">
            <IntlProvider locale="en" messages={{}}>
                <StorybookDocsContainer {...props}>{children}</StorybookDocsContainer>
            </IntlProvider>
        </RootProvider>
    );
}

const preview: Preview = {
    tags: ['autodocs', 'a11y-test'],

    parameters: {
        layout: 'fullscreen',
        viewport: {
            options: viewports,
        },
        backgrounds: {
            options: {
                white: {
                    name: 'white',
                    value: '#ffffff',
                },
            },
        },
        options: {
            storySort: (story1, story2) =>
                globalThis['storybook-multilevel-sort:storySort'](story1, story2),
            selectedPanel: 'addon-controls',
        },
        docs: {
            container: DocsContainer,
            codePanel: true,
        },
        controls: {
            exclude: /(^on[A-Z])|(^as$)|(^ref$)|(^key$)/,
            expanded: true,
        },
        a11y: {
            options: {
                preload: false,
            },

            config: {
                rules: [
                    {
                        /*
                         * see https://preply.atlassian.net/browse/DES-1929
                         */
                        id: 'color-contrast',
                        enabled: false,
                    },
                ],
            },

            // 'todo' - show a11y violations in the test UI only
            // 'error' - fail CI on a11y violations
            // 'off' - skip a11y checks entirely
            test: 'todo',
        },
    },

    decorators: [PreventIframeFromScrollingParent, withRootProvider, withIntlProvider],
    loaders: [intlLoader],

    globalTypes: {
        ...intlGlobals,
    },

    initialGlobals: {
        backgrounds: {
            value: 'white',
        },
    },

    async beforeEach() {
        resetAllMocks();
    },
};

export default preview;