import React from 'react'
import { View } from '../view'
import { Theme, useTheme } from './Theme'

function ThemeSwitcher () {
  const { activeTheme, setTheme, themes } = useTheme()
  return (
    <View gap="s">
      <div>Active theme: {activeTheme}</div>
      {themes.map((themeName) => (
        <button key={themeName} type="button" onClick={() => setTheme(themeName)}>
          {themeName}
        </button>
      ))}
    </View>
  )
}

export default {
  title: 'Design System/Base/Theme',
  component: Theme,
  render: (args) => (
    <div id={args.elementSelector.replace('#', '')}>
      <Theme {...args}>
        <View
          surface="primary"
          style={{ width: '50px', height: '50px' }}
        />
      </Theme>
    </div>
  ),
}

export const SingleTheme = {
  args: {
    elementSelector: '#single-theme-root',
    theme: {
      'surface-primary': 'tomato',
    },
  },
}

export const MultipleThemes = {
  render: (args) => (
    <div id={args.elementSelector.replace('#', '')}>
      <Theme {...args}>
        <View gap="m">
          <View surface="primary" style={{ width: '50px', height: '50px' }} />
          <ThemeSwitcher />
        </View>
      </Theme>
    </div>
  ),
  args: {
    elementSelector: '#multi-theme-root',
    theme: 'light',
    themes: {
      light: { 'surface-primary': 'lightblue' },
      dark: { 'surface-primary': 'hsl(0, 0%, 20%)' },
      tomato: { 'surface-primary': 'tomato' },
    },
  },
}