import { useState, useContext, useEffect } from 'react';
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Box } from '../Box/Box';
import { Toggle } from '../Toggle/Toggle';
import { RadioGroup } from '../RadioGroup/RadioGroup';
import { ThemeProvider, Theme, useTheme } from './ThemeProvider';

<Meta
  title="Providers/ThemeProvider/Overview"
  component={ThemeProvider}
  parameters={{
    controls: { hideNoControlsWarning: true },
  }}
/>

# ThemeProvider

Allow users to set the theme for the entire application by adding the `ThemeProvider` to the root of the application.

Place the `ThemeProvider` component at the root of your application (or as high as you need it based on your application).
The example below wraps the entire `App` with the provider but use your own judgement if you have other high-level providers in your app.

<Canvas withSource="open">
  <Story name="Usage">
    {() => {
      const App = () => {
        const { theme, setTheme } = useTheme();
        const options = [
          {
            id: 'light',
            value: 'light',
            label: 'Light',
          },
          {
            id: 'dark',
            value: 'dark',
            label: 'Dark',
          },
          {
            id: 'system',
            value: 'system',
            label: 'System',
          },
        ];
        return (
          <Box
            gap="md"
            background="secondary"
            padding="xl"
            color="body-primary"
          >
            <p>Theme: {theme}</p>
            <RadioGroup
              name="SelectTheme"
              value={theme}
              options={options}
              onChange={event => setTheme(event.target.value)}
            />
          </Box>
        );
      };
      return (
        <ThemeProvider defaultTheme="light" storageKey="palmetto-ui-theme">
          <App />
        </ThemeProvider>
      );
    }}
  </Story>
</Canvas>
