import { switchAnatomy } from '@ark-ui/react/anatomy';
import { defineSlotRecipe } from '@pandacss/dev';

export const switchRecipe = defineSlotRecipe({
  className: 'switchComponent',
  jsx: ['Switch', /Switch\.+/],
  slots: switchAnatomy.extendWith('indicator').keys(),
  base: {
    root: {
      display: 'inline-flex',
      alignItems: 'center',
      position: 'relative',
      verticalAlign: 'middle',
      '--switch-diff': 'calc(var(--switch-width) - var(--switch-height))',
      '--switch-x': {
        base: 'var(--switch-diff)',
        _rtl: 'calc(var(--switch-diff) * -1)',
      },
    },
    label: {
      fontWeight: 'medium',
      userSelect: 'none',
      lineHeight: '1',
    },
    indicator: {
      position: 'absolute',
      height: 'var(--switch-height)',
      width: 'var(--switch-height)',
      fontSize: 'var(--switch-indicator-font-size)',
      fontWeight: 'medium',
      flexShrink: 0,
      userSelect: 'none',
      display: 'grid',
      placeContent: 'center',
      transition: 'inset-inline-start 0.12s ease',
      insetInlineStart: 'calc(var(--switch-x) - {spacing.xxs})',
      _checked: {
        insetInlineStart: 'xxs',
      },
    },
    control: {
      display: 'inline-flex',
      gap: 'sm',
      flexShrink: 0,
      justifyContent: 'flex-start',
      cursor: 'pointer',
      borderRadius: 'full',
      position: 'relative',
      width: 'var(--switch-width)',
      height: 'var(--switch-height)',
      transition: 'backgrounds',
      focusVisibleRing: 'outside',
      _disabled: {
        layerStyle: 'disabled',
      },
    },
    thumb: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0,
      transitionProperty: 'translate',
      transitionDuration: 'fast',
      borderRadius: 'inherit',
      _checked: {
        translate: 'var(--switch-x) 0',
      },
    },
  },
  defaultVariants: {
    variant: 'solid',
    size: 'md',
  },
  variants: {
    variant: {
      solid: {
        control: {
          borderRadius: 'full',
          // Off state: palette-tinted subtle bg — matches Figma rgba(primary,~40%) off-state.
          // Uses colorPalette so it adapts to primary/secondary/tertiary/neutral/error.
          bg: 'colorPalette.subtle.bg',
          focusVisibleRing: 'outside',
          _checked: {
            // On state: solid filled palette color (primary.9, neutral.solid.bg, etc.)
            bg: 'colorPalette.solid.bg',
          },
        },
        thumb: {
          // Thumb is always white — contrasts cleanly on both subtle and solid track bg.
          bg: 'white',
          width: 'var(--switch-height)',
          height: 'var(--switch-height)',
          scale: '0.8',
          boxShadow: 'xs',
        },
      },
    },
    size: {
      xs: {
        root: {
          gap: '2',
          '--switch-width': 'sizes.8',
          '--switch-height': 'sizes.4',
          '--switch-indicator-font-size': 'fontSizes.xs',
        },
        label: { fontSize: 'sm' },
      },
      sm: {
        root: {
          gap: '2',
          '--switch-width': 'sizes.9',
          '--switch-height': 'sizes.4.5',
          '--switch-indicator-font-size': 'fontSizes.xs',
        },
        label: { fontSize: 'sm' },
      },
      md: {
        root: {
          gap: '3',
          '--switch-width': 'sizes.10',
          '--switch-height': 'sizes.5',
          '--switch-indicator-font-size': 'fontSizes.sm',
        },
        label: { fontSize: 'md' },
      },
      lg: {
        root: {
          gap: '3',
          '--switch-width': 'sizes.11',
          '--switch-height': 'sizes.5.5',
          '--switch-indicator-font-size': 'fontSizes.md',
        },
        label: { fontSize: 'lg' },
      },
    },
  },
});