import { defineRecipe } from '@pandacss/dev'

export const toggleRecipe = defineRecipe({
  className:'toggle',
  base: {
    position: 'relative',
    display: 'inline-grid',
    placeContent: 'center',
    flexShrink: '0',
    verticalAlign: 'middle',
    cursor: 'pointer',
    userSelect: 'none',
    appearance: 'none',
    gridTemplateColumns: '0fr 1fr 1fr',
    border: 'var(--border, 1px) solid currentColor',
    borderRadius: 'var(--radius-selector)',
    color: 'var(--input-color)',
    '--input-color': 'color-mix(in oklab, token(colors.base-content) 50%, transparent)',
    '--toggle-size': 'token(spacing.6)',
    '--toggle-p': 'calc(var(--toggle-size) * 0.125)',
    padding: 'var(--toggle-p)',
    width: 'calc((var(--toggle-size) * 2) - (var(--border, 1px) + var(--toggle-p)) * 2)',
    height: 'var(--toggle-size)',
    boxShadow: '0 1px color-mix(in oklab, currentColor 10%, transparent) inset',
    transition: 'color 0.3s, grid-template-columns 0.2s',
    _before: {
      content: '""',
      position: 'relative',
      gridColumnStart: '2',
      gridRowStart: '1',
      aspectRatio: '1 / 1',
      width: '100%',
      height: '100%',
      borderRadius: 'var(--radius-selector)',
      backgroundColor: 'currentColor',
      transition: 'background-color 0.1s',
      boxShadow: '0 -1px oklch(0% 0 0 / 0.1) inset, 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px color-mix(in oklab, currentColor 10%, transparent)',
    },
    '&:focus-visible': { outline: '2px solid currentColor', outlineOffset: '2px' },
    '&:checked, &[aria-checked="true"]': {
      gridTemplateColumns: '1fr 1fr 0fr',
      backgroundColor: 'base-100',
      '--input-color': 'token(colors.base-content)',
    },
    _disabled: {
      cursor: 'not-allowed',
      opacity: '0.3',
      _before: { backgroundColor: 'transparent', border: 'var(--border, 1px) solid currentColor' },
    },
  },
  variants: {
    color: {
      neutral: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.neutral)' } },
      primary: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.primary)' } },
      secondary: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.secondary)' } },
      accent: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.accent)' } },
      info: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.info)' } },
      success: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.success)' } },
      warning: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.warning)' } },
      error: { '&:checked, &[aria-checked="true"]': { '--input-color': 'token(colors.error)' } },
    },
    size: {
      xs: { '--toggle-size': 'token(spacing.4)' },
      sm: { '--toggle-size': 'token(spacing.5)' },
      md: { '--toggle-size': 'token(spacing.6)' },
      lg: { '--toggle-size': 'token(spacing.7)' },
      xl: { '--toggle-size': 'token(spacing.8)' },
    },
  },
  defaultVariants: {
    size: 'md',
  },
})