import { expect, test } from 'vitest'
import { createRuleProcessor } from './fixture'
import type { Config } from '@bamboocss/types'

const config: Config = {
  theme: {
    extend: {
      recipes: {
        text: {
          className: 'text',
          base: {
            marginTop: 'auto',
            marginBottom: 0,
            paddingTop: 0,
            objectPos: 'center',
          },
          variants: {
            variant: {
              sm: {
                '&:first-child': {
                  marginRight: '4',
                  '&:hover': {
                    color: { base: 'red.200', md: 'gray.300' },
                  },
                },
                '&:disabled': {
                  marginRight: '40px',
                  filter: 'unset',
                },
              },
              md: {
                '&:before': {
                  '--mb': 'colors.gray.300',
                  left: '5',
                  borderBottomRightRadius: 'sm',
                },
                '&:after': {
                  right: 90,
                  borderBottomRightRadius: 'lg',
                  transform: 'scaleX(-1)',
                },
              },
            },
          },
        },
      },
    },
  },
}

function textRecipe(variants: Record<string, any> = {}) {
  return createRuleProcessor(config).recipe('text', variants)!.toCss()
}

test('[recipe] direct nesting / recipe ruleset', () => {
  expect(textRecipe({ variant: 'sm' })).toMatchInlineSnapshot(`
    "@layer recipes {
      .text {
        object-pos: center;
        margin-top: auto;
        margin-bottom: var(--spacing-0);
        padding-top: var(--spacing-0);
    }

      .text--variant_sm:disabled {
        filter: unset;
        margin-right: 40px;
    }

      .text--variant_sm:first-child {
        margin-right: var(--spacing-4);
    }

      .text--variant_sm:first-child:hover {
        color: var(--colors-red-200);
    }

      @media (width >= 48rem) {
        .text--variant_sm:first-child:hover {
          color: var(--colors-gray-300);
    }
    }
    }"
  `)

  expect(textRecipe({ variant: 'md' })).toMatchInlineSnapshot(`
    "@layer recipes {
      .text {
        object-pos: center;
        margin-top: auto;
        margin-bottom: var(--spacing-0);
        padding-top: var(--spacing-0);
    }

      .text--variant_md:before {
        --mb: var(--colors-gray-300);
        left: var(--spacing-5);
        border-bottom-right-radius: var(--radii-sm);
    }

      .text--variant_md:after {
        transform: scaleX(-1);
        right: 90px;
        border-bottom-right-radius: var(--radii-lg);
    }
    }"
  `)
})
