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

export const chipVariants = ['solid', 'outline', 'ghost'] as const
export const chipSizes = ['small', 'medium', 'large'] as const

interface ChipRecipeArg {
  semanticColorNames: string[]
}

const chipRecipe = ({ semanticColorNames }: ChipRecipeArg) => {
  const colors = ['neutral', ...semanticColorNames]
  return defineRecipe({
    className: 'chip',
    base: {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      gap: 'xs',
      lineHeight: '1',
      borderRadius: 'sm',
      fontWeight: 'semibold',
      lineHeightStep: 'none',
      userSelect: 'none'
    },
    variants: {
      color: {
        ...Object.fromEntries(colors.map((color) => [color, {}]))
      },
      variant: {
        ...Object.fromEntries(chipVariants.map((variant) => [variant, {}]))
      },
      size: {
        ...Object.fromEntries(
          chipSizes.map((size) => {
            switch (size) {
              case 'small':
                return [
                  size,
                  {
                    paddingBlock: 'calc({spacing.sm} * 0.5)',
                    paddingInline: 'calc({spacing.sm} * 0.75)',
                    fontSize: 'xs'
                  } as SystemStyleObject
                ]
              case 'medium':
                return [
                  size,
                  {
                    paddingBlock: 'calc({spacing.sm} * 0.75)',
                    paddingInline: 'calc({spacing.sm})',
                    fontSize: 'sm'
                  } as SystemStyleObject
                ]
              case 'large':
                return [
                  size,
                  {
                    paddingBlock: 'calc({spacing.sm})',
                    paddingInline: 'calc({spacing.sm} * 1.25)',
                    fontSize: 'base'
                  } as SystemStyleObject
                ]
              default:
                return [size, {}]
            }
          })
        )
      }
    },
    compoundVariants: colors.flatMap((color) => {
      return chipVariants.map((variant) => {
        switch (variant) {
          case 'solid':
            return {
              color,
              variant,
              css: {
                backgroundColor: `{colors.${color}.9}`,
                color: `{colors.${color}.foreground}`
              }
            }
          case 'outline':
            return {
              color,
              variant,
              css: {
                border: '1px solid',
                borderColor: `{colors.${color}.6}`,
                color: `{colors.${color}.9}`
              }
            }
          case 'ghost':
            return {
              color,
              variant,
              css: {
                backgroundColor: `{colors.${color}.2}`,
                color: `{colors.${color}.9}`
              }
            }
          default:
            return {
              color,
              variant,
              css: {}
            }
        }
      })
    }),
    defaultVariants: {
      color: 'neutral',
      size: 'medium',
      variant: 'solid'
    }
  })
}

export default chipRecipe