import type { Preview } from '@storybook/svelte';
import { init, locale, register } from 'svelte-i18n';

// See src/routes/+layout.svelte
// Order is important!
import '../src/theme.postcss';
//import '@skeletonlabs/skeleton/styles/skeleton.css';
import '../src/app.postcss';
import './fix.css';

register('de', () => import('../src/lib/i18n/locales/de.json'));
register('en', () => import('../src/lib/i18n/locales/en.json'));
register('he', () => import('../src/lib/i18n/locales/he.json'));
init({ fallbackLocale: 'en', initialLocale: 'en' });
locale.set('en');

const preview: Preview = {
	globalTypes: {
		locale: {
			description: 'Internationalization locale',
			defaultValue: 'en',
			toolbar: {
				icon: 'globe',
				items: [
					{
						value: 'de',
						title: 'German'
					},
					{
						value: 'en',
						title: 'English'
					},
					{
						value: 'he',
						title: 'Hebrew'
					}
				]
			}
		}
	},
	parameters: {
		actions: { argTypesRegex: '^on[A-Z].*' },
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i
			}
		}
	}
};

export default preview;