import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'

const markVariants = ['highlight', 'bold', 'underline'] as const

interface MarkRecipeArg {
  semanticColorNames: string[]
}

const markRecipe = ({ semanticColorNames }: MarkRecipeArg) => {
  const colors = ['neutral', ...semanticColorNames] as const
  return defineRecipe({
    className: 'mark',
    base: {
      backgroundColor: 'transparent',
      display: 'inline-block',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'inherit',
      gap: 'xs'
    },
    variants: {
      color: {
        ...Object.fromEntries(
          colors.map((color) => [
            color,
            {
              '&::selection': {
                backgroundColor: `{colors.${color}.2}`,
                color: `{colors.${color}.9}`
              }
            }
          ])
        )
      },
      variant: {
        ...Object.fromEntries(markVariants.map((variant) => [variant, {}]))
      }
    },
    compoundVariants: markVariants.flatMap((variant) =>
      colors.map((color) => {
        switch (variant) {
          case 'highlight':
            return {
              color,
              variant,
              css: {
                position: 'relative',
                marginBlock: '0',
                marginInline: '-0.4ch',
                paddingBlock: '0.2ch',
                paddingInline: '0.6ch',
                borderTopLeftRadius: '0.5em 40%',
                borderTopRightRadius: '0.3em 15%',
                borderBottomLeftRadius: '0.45em 80%',
                borderBottomRightRadius: '0.75em 60%',
                backgroundClip: 'padding-box',
                fontWeight: 'semibold',
                color: `{colors.${color}.foreground}`,
                _before: {
                  content: '""',
                  position: 'absolute',
                  inset: '0',
                  width: '100%',
                  height: '80%',
                  top: '50%',
                  left: '50%',
                  boxDecorationBreak: 'clone',
                  WebkitBoxDecorationBreak: 'clone',
                  borderRadius: 'inherit',
                  background: 'inherit',
                  backgroundImage: `linear-gradient(to right,color-mix(in srgb, {colors.${color}.9} 15%,transparent) 0%,color-mix(in srgb, {colors.${color}.9} 65%, transparent) 12%, color-mix(in srgb, {colors.${color}.9} 20%, transparent 80%))`,
                  transform: 'translate(-50%, -50%) skewX(-15deg)',
                  zIndex: '-1'
                }
              } as SystemStyleObject
            }
          case 'bold':
            return {
              color,
              variant,
              css: {
                fontWeight: 'bold',
                color: `{colors.${color}.9}`
              } as SystemStyleObject
            }
          case 'underline':
            return {
              color,
              variant,
              css: {
                textDecorationLine: 'underline',
                textDecorationThickness: '2px',
                textDecorationColor: `{colors.${color}.9}`
              } as SystemStyleObject
            }
          default:
            return { color, variant, css: {} }
        }
      })
    ),
    defaultVariants: {
      color: 'primary',
      variant: 'bold'
    }
  })
}

export default markRecipe
export { markVariants }