import type { Theme } from '../../theme'
import defaultTheme from '../default-theme'
import type { UserConfig } from './types'

export function createCompatConfig(cssTheme: Theme): UserConfig {
  return {
    theme: {
      ...defaultTheme,

      // In the defaultTheme config, the `colors` key is not a function but a
      // shallow object. We don't want to define the color namespace unless it
      // is in the CSS theme so here we explicitly overwrite the defaultTheme
      // and only allow colors from the CSS theme.
      colors: ({ theme }) => theme('color', {}),

      boxShadow: ({ theme }) => ({
        ...defaultTheme.boxShadow,
        ...theme('shadow', {}),
      }),

      animation: ({ theme }) => ({
        ...defaultTheme.animation,
        ...theme('animate', {}),
      }),

      borderRadius: ({ theme }) => ({
        ...defaultTheme.borderRadius,
        ...theme('radius', {}),
      }),

      screens: ({ theme }) => ({
        ...defaultTheme.screens,
        ...theme('breakpoint', {}),
      }),

      transitionDuration: {
        ...defaultTheme.transitionDuration,
        DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
      },

      transitionTimingFunction: {
        ...defaultTheme.transitionTimingFunction,
        DEFAULT: cssTheme.get(['--default-transition-timing-function']) ?? null,
      },
    },
  }
}