import { createContext } from 'react'
import { createTheming } from 'react-jss'

import { AnimatedPageStyles, AnimatedPageType } from './default/animation-page'
import { ButtonStyles, ButtonType } from './default/button'
import { ChoiceButtonStyles, ChoiceButtonType } from './default/choice-button'
import { ColoredPageStyles, ColoredPageType } from './default/colored-page'
import { GlobalStyles, GlobalStylesType } from './default/global-styles'
import { HeaderStyles, HeaderType } from './default/header'
import { MultiChoiceButtonStyles, MultiChoiceButtonType } from './default/multichoice-button'
import { NextButtonStyles, NextButtonType } from './default/next-button'
import { ProgressBarStyles, ProgressBarType } from './default/progress-bar'
import { RatingScaleStyles, RatingScaleType } from './default/rating-scale'
import { TabsStyles, TabsType } from './default/tabs'
import { VerticalCardStyles, VerticalCardType } from './default/vertical-card'

export type Palette = Record<string, string>

export type ThemeProps = {
  globalStyles: GlobalStylesType
  button: ButtonType
  nextButton: NextButtonType
  choiceButton: ChoiceButtonType
  multiChoiceButton: MultiChoiceButtonType
  header: HeaderType
  progressBar: ProgressBarType
  verticalCard: VerticalCardType
  coloredPage: ColoredPageType
  tabs: TabsType
  ratingScale: RatingScaleType
  animatedPage: AnimatedPageType
}

export type Theme = {
  theme: ThemeProps
  overwrite?: Partial<ThemeProps>
}

export const defaultTheme: ThemeProps = {
  button: ButtonStyles,
  nextButton: NextButtonStyles,
  choiceButton: ChoiceButtonStyles,
  multiChoiceButton: MultiChoiceButtonStyles,
  header: HeaderStyles,
  progressBar: ProgressBarStyles,
  verticalCard: VerticalCardStyles,
  coloredPage: ColoredPageStyles,
  tabs: TabsStyles,
  ratingScale: RatingScaleStyles,
  animatedPage: AnimatedPageStyles,
  globalStyles: GlobalStyles,
}
const ThemeContext = createContext<ThemeProps>(defaultTheme)

export const theming = createTheming(ThemeContext)
