// @flow
import React, { useState } from 'react';
import type { StoryDecorator } from '@storybook/react';
import { useChannel } from '@storybook/addons';
import { THEME_CHANGED, DEFAULT_THEME_NAME } from './constants';
import { PatchworkThemeProvider, themes } from '../../src';

export const themeDecorator: StoryDecorator = (story, context) => {
  const [theme, setTheme] = useState(themes[DEFAULT_THEME_NAME]);

  useChannel({
    [THEME_CHANGED]: setTheme,
  });

  return (
    <PatchworkThemeProvider theme={theme}>
      {story(context)}
    </PatchworkThemeProvider>
  );
};
