import presetBase from '@bamboocss/preset-base'
import presetBamboo from '@bamboocss/preset-bamboo'
import type { PresetCore, Theme } from '@bamboocss/types'

import { recipes } from './recipes'
import { slotRecipes } from './slot-recipes'
import { semanticTokens } from './semantic-tokens'

export const conditions = {
  ...presetBase.conditions,
  materialTheme: '[data-color=material] &',
  pastelTheme: '[data-color=pastel] &',
  dark: '[data-theme=dark] &, .dark &, &.dark, &[data-theme=dark]',
  light: '[data-theme=light] &, .light &, &.light, &[data-theme=light]',
}

const theme = presetBamboo.theme
const tokens = {
  ...theme.tokens,
  colors: {
    ...theme.tokens?.colors,
    deep: {
      test: {
        yam: {
          value: '%555',
        },
        pool: {
          poller: {
            value: '#fff',
          },
          tall: {
            value: '$dfdf',
          },
        },
      },
    },
  },
} as Theme['tokens']

const mixins = {
  headline: {
    DEFAULT: {
      value: {
        fontSize: '1.5rem',
        fontWeight: 'bold',
      },
    },
    h1: {
      value: {
        fontSize: '2rem',
        fontWeight: 'bold',
      },
    },
    h2: {
      value: {
        fontSize: { base: '1.5rem', lg: '2rem' },
        fontWeight: 'bold',
      },
    },
  },
}

export const fixturePreset: Omit<PresetCore, 'global' | 'staticCss'> = {
  ...presetBase,
  conditions,
  theme: {
    ...theme,
    mixins,
    tokens,
    semanticTokens,
    recipes,
    slotRecipes,
  },
}
