import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  plugins: [
    {
      name: 'vite-ts-sandbox',
      hooks: {
        // Dynamically add a recipe
        'config:resolved': async ({ config }) => {
          const { someRecipe } = await import('./some-recipe')
          const recipes = config.theme?.recipes
          if (recipes) {
            recipes['someRecipe'] = someRecipe
          }
        },
        // Change the hash function
        'utility:created': ({ configure }) => {
          configure({
            toHash: (paths, toHash) => {
              const stringConds = paths.join(':')
              const splitConds = stringConds.split('_')
              const hashConds = splitConds.map(toHash)
              return hashConds.join('_')
            },
          })
        },
        // Dynamically create a CSS rule
        'context:created': ({ ctx }) => {
          ctx.processor.css({ color: 'lime.300' })
        },
      },
    },
  ],
  preflight: true,
  include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
  exclude: [],
  outdir: 'styled-system',
  theme: {
    semanticTokens: {
      colors: {
        text: { value: { base: 'token(colors.gray.600)', _osDark: 'token(colors.gray.400)' } },
      },
    },
    recipes: {
      // someRecipe,
      button: {
        className: 'button',
        jsx: ['Button', 'ListedButton', /WithRegex$/, 'PrimaryButtonLike'],
        description: 'A button styles',
        base: {
          fontSize: 'lg',
        },
        variants: {
          size: {
            sm: {
              padding: '2',
              borderRadius: 'sm',
            },
            md: {
              padding: '4',
              borderRadius: 'md',
            },
          },
          variant: {
            primary: {
              color: 'white',
              backgroundColor: 'blue.500',
            },
            danger: {
              color: 'white',
              backgroundColor: 'red.500',
            },
            secondary: {
              color: 'pink.300',
              backgroundColor: 'green.500',
            },
            purple: {
              color: 'amber.300',
              backgroundColor: 'purple.500',
            },
          },
          state: {
            focused: {
              color: 'green',
            },
            hovered: {
              color: 'pink.400',
            },
          },
          rounded: {
            true: {
              borderRadius: 'md',
            },
          },
        },
        compoundVariants: [
          {
            size: 'sm',
            variant: 'primary',
            css: {
              fontSize: '12px',
            },
          },
          {
            variant: ['primary', 'danger'],
            state: 'focused',
            css: {
              padding: 4,
              fontWeight: 'bold',
              fontSize: '24px',
            },
          },
        ],
      },
    },
  },
  global: {
    css: {
      '*': {
        fontFamily: 'Inter',
        margin: '0',
      },
      a: {
        color: 'inherit',
        textDecoration: 'none',
      },
    },
  },
})
