import { defineRecipe } from '@pandacss/dev'

export const buttonRecipe = defineRecipe({
  className:'button',  
  base: {
    display: 'inline-flex',
    flexShrink: '0',
    flexWrap: 'nowrap',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 'token(spacing.1.5)',
    textAlign: 'center',
    verticalAlign: 'middle',
    cursor: 'pointer',
    userSelect: 'none',
    textDecoration: 'none',
    '& svg': { display: 'block' },
    appearance: 'none',
    '&:is([type="checkbox"], [type="radio"])[aria-label]:after': {
      content: 'attr(aria-label)',
    },
    fontWeight: 'token(fontWeights.normal)',
    borderRadius: 'var(--radius-field)',
    borderWidth: 'var(--btn-border-width, 1px)',
    touchAction: 'manipulation',
    transitionProperty: 'color, background-color, border-color, box-shadow, transform',
    transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
    transitionDuration: '0.2s',

    '--btn-p': 'token(spacing.4)',
    '--btn-fg': 'token(colors.base-content)',
    '--btn-bg': 'var(--btn-color, token(colors.base-200))',
    '--btn-border': 'color-mix(in oklab, var(--btn-color, token(colors.base-200)), #000 calc(var(--depth, 1) * 5%))',
    '--btn-shadow': [
      '0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth, 1) * 30%), transparent)',
      '0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth, 1) * 30%), transparent)',
    ].join(', '),
    '--btn-inset': '0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth, 1) * 6%))',

    height: 'var(--btn-size)',
    paddingInline: 'var(--btn-p)',
    fontSize: 'var(--btn-fontsize, 0.875rem)',
    backgroundColor: 'var(--btn-bg)',
    color: 'var(--btn-fg)',
    borderColor: 'var(--btn-border)',
    borderStyle: 'var(--btn-border-style, solid)',
    outlineColor: 'var(--btn-color, token(colors.base-content))',
    outlineOffset: '2px',

    backgroundImage: 'none, var(--fx-noise)',
    backgroundSize: 'auto, calc(var(--noise, 0) * 100%)',
    textShadow: '0 0.5px oklch(100% 0 0 / calc(var(--depth, 1) * 0.15))',
    boxShadow: 'var(--btn-inset) inset, var(--btn-shadow)',

    '@media (hover: hover)': {
      _hover: {
        '--btn-bg': 'color-mix(in oklab, var(--btn-color, token(colors.base-200)), #000 7%)',
        color: 'var(--btn-fg)',
        '--btn-border': 'color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth, 1) * 5%))',
        '--btn-border-style': 'solid',
        '--btn-inset': '0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth, 1) * 6%))',
        '--btn-shadow': [
          '0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth, 1) * 30%), transparent)',
          '0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth, 1) * 30%), transparent)',
        ].join(', '),
      },
    },

    '&:active:not([data-active])': {
      translate: '0 0.5px',
      '--btn-bg': 'color-mix(in oklab, var(--btn-color, token(colors.base-200)), #000 5%)',
      color: 'var(--btn-fg, token(colors.base-content))',
      '--btn-border': 'color-mix(in oklab, var(--btn-color, token(colors.base-200)), #000 7%)',
      '--btn-border-style': 'solid',
      '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
      '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
    },

    _focusVisible: {
      outlineWidth: '2px',
      outlineStyle: 'solid',
      isolation: 'isolate',
    },

    '&:disabled, &[disabled], &[aria-disabled="true"], &.btn-disabled': {
      pointerEvents: 'none',
      color: 'color-mix(in oklch, token(colors.base-content) 20%, transparent)',
      '--btn-bg': 'transparent',
      '--btn-border': 'transparent',
      backgroundImage: 'none',
      '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
      '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
    },
  },
  variants: {
    color: {
      neutral: { '--btn-color': 'token(colors.neutral)', '--btn-fg': 'token(colors.neutral-content)' },
      primary: { '--btn-color': 'token(colors.primary)', '--btn-fg': 'token(colors.primary-content)' },
      secondary: { '--btn-color': 'token(colors.secondary)', '--btn-fg': 'token(colors.secondary-content)' },
      accent: { '--btn-color': 'token(colors.accent)', '--btn-fg': 'token(colors.accent-content)' },
      info: { '--btn-color': 'token(colors.info)', '--btn-fg': 'token(colors.info-content)' },
      success: { '--btn-color': 'token(colors.success)', '--btn-fg': 'token(colors.success-content)' },
      warning: { '--btn-color': 'token(colors.warning)', '--btn-fg': 'token(colors.warning-content)' },
      error: { '--btn-color': 'token(colors.error)', '--btn-fg': 'token(colors.error-content)' },
    },
    variant: {
      outline: {
        '--btn-bg': 'transparent',
        color: 'var(--btn-color, token(colors.base-content))',
        '--btn-border': 'var(--btn-color, token(colors.base-content))',
        '--btn-border-style': 'solid',
        backgroundImage: 'none',
        '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
        '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
      },
      dash: {
        '--btn-bg': 'transparent',
        color: 'var(--btn-color, token(colors.base-content))',
        '--btn-border': 'var(--btn-color, token(colors.base-content))',
        '--btn-border-style': 'dashed',
        backgroundImage: 'none',
        '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
        '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
      },
      soft: {
        '--btn-bg': 'color-mix(in oklab, var(--btn-color, token(colors.base-content)) 8%, token(colors.base-100))',
        color: 'var(--btn-color, token(colors.base-content))',
        '--btn-border': 'color-mix(in oklab, var(--btn-color, token(colors.base-content)) 10%, token(colors.base-100))',
        '--btn-border-style': 'solid',
        backgroundImage: 'none',
        '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
        '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
      },
      ghost: {
        '--btn-bg': 'transparent',
        color: 'var(--btn-color, currentColor)',
        '--btn-border': 'transparent',
        backgroundImage: 'none',
        '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
        '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
      },
      link: {
        '--btn-bg': 'transparent',
        color: 'var(--btn-color, token(colors.primary))',
        '--btn-border': 'transparent',
        textDecoration: 'underline',
        backgroundImage: 'none',
        '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
        '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
      },
    },
    size: {
      xs: { '--btn-fontsize': 'token(fontSizes.xs)', '--btn-p': 'token(spacing.2)', '--btn-size': 'token(spacing.6)' },
      sm: { '--btn-fontsize': 'token(fontSizes.sm)', '--btn-p': 'token(spacing.3)', '--btn-size': 'token(spacing.8)' },
      md: { '--btn-fontsize': 'token(fontSizes.md)', '--btn-p': 'token(spacing.4)', '--btn-size': 'token(spacing.10)' },
      lg: { '--btn-fontsize': 'token(fontSizes.xl)', '--btn-p': 'token(spacing.5)', '--btn-size': 'token(spacing.12)' },
      xl: { '--btn-fontsize': 'token(fontSizes.3xl)', '--btn-p': 'token(spacing.6)', '--btn-size': 'token(spacing.14)' },
    },
    active: {
      true: {
        '--btn-bg': 'color-mix(in oklab, var(--btn-color, token(colors.base-200)), #000 5%)',
        color: 'var(--btn-fg, token(colors.base-content))',
        '--btn-border': 'color-mix(in oklab, var(--btn-color, token(colors.base-200)), #000 7%)',
        '--btn-border-style': 'solid',
        '--btn-inset': '0 0 0 0 oklch(0% 0 0 / 0)',
        '--btn-shadow': '0 0 0 0 oklch(0% 0 0 / 0)',
        isolation: 'isolate',
      },
    },
    shape: {
      square: { paddingInline: '0', width: 'var(--btn-size)', height: 'var(--btn-size)' },
      circle: { paddingInline: '0', width: 'var(--btn-size)', height: 'var(--btn-size)', borderRadius: '9999px' },
    },
    fluid: {
      block: { width: '100%' },
      wide: { width: '100%', maxWidth: 'token(spacing.64)' },
    },
    borderWidth: {
      '1': { '--btn-border-width': '1px' },
      '2': { '--btn-border-width': '2px' },
      '3': { '--btn-border-width': '3px' },
    },
  },
  defaultVariants: {
    size: 'md',
    borderWidth: '1',
  },
})