import { definePreset } from '@pandacss/dev'
import generateColors from '@/colors/generateColors'
import generateNeutralColor from '@/colors/generateNeutralColor'
import generateSemanticColors from '@/colors/generateSemanticColors'
import fadeKeyframes from '@/keyframes/fade'
import pulseKeyframes from '@/keyframes/pulse'
import shimmerKeyframes from '@/keyframes/shimmer'
import skeletonPattern from '@/patterns/skeleton'
import alertRecipe from '@/recipes/alert'
import buttonRecipe from '@/recipes/button'
import chipRecipe from '@/recipes/chip'
import detailsRecipe from '@/recipes/details'
import iconButtonRecipe from '@/recipes/iconButton'
import inputRecipe from '@/recipes/input'
import markRecipe from '@/recipes/mark'
import progressBarRecipe from '@/recipes/progressBar'
import selectRecipe from '@/recipes/select'
import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types'

export type ThemeConfig = {
  neutral?: NeutralColor
  semanticColors?: Record<string, BrandColor>
  colorVariation?: ColorVariation
  includeColors?: Color[]
}

const defaultConfig: Required<ThemeConfig> = {
  neutral: 'slate',
  colorVariation: { dark: false, p3: false, alpha: false },
  semanticColors: { primary: 'teal' },
  includeColors: color
}

const srJuggernautPandaPreset = (config?: ThemeConfig) => {
  const mergedConfig = { ...defaultConfig, ...config }
  const colors = generateColors(config?.includeColors)
  const neutral = generateNeutralColor(mergedConfig.neutral, mergedConfig.colorVariation)
  const semanticColors = generateSemanticColors(mergedConfig.semanticColors, mergedConfig.colorVariation)
  const semanticColorKeysArray = Object.keys(semanticColors)
  return definePreset({
    name: 'srjuggernaut-panda-preset',
    patterns: {
      skeleton: skeletonPattern
    },
    theme: {
      recipes: {
        alert: alertRecipe({ semanticColorNames: semanticColorKeysArray }),
        button: buttonRecipe({ semanticColorNames: semanticColorKeysArray }),
        chip: chipRecipe({ semanticColorNames: semanticColorKeysArray }),
        details: detailsRecipe({ semanticColorNames: semanticColorKeysArray }),
        mark: markRecipe({ semanticColorNames: semanticColorKeysArray }),
        input: inputRecipe({ semanticColorNames: semanticColorKeysArray }),
        iconButton: iconButtonRecipe({ semanticColorNames: semanticColorKeysArray }),
        progressBar: progressBarRecipe({ semanticColorNames: semanticColorKeysArray }),
        select: selectRecipe({ semanticColorNames: semanticColorKeysArray })
      },
      tokens: {
        animations: {},
        aspectRatios: {
          square: { value: '1 / 1' },
          '20:9': { value: '20 / 9' },
          '16:9': { value: '16 / 9' },
          '9:16': { value: '9 / 16' },
          '9:20': { value: '9 / 20' },
          '4:3': { value: '4 / 3' },
          '3:4': { value: '3 / 4' }
        },
        assets: {},
        blurs: {},
        borders: {},
        borderWidths: {},
        colors,
        containerNames: {},
        cursor: {},
        durations: {
          fast: { value: '150ms' },
          normal: { value: '300ms' },
          slow: { value: '450ms' }
        },
        easings: {
          easeIn: { value: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)' },
          easeOut: { value: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)' },
          easeInOut: { value: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)' },
          easeInQuint: { value: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)' },
          easeOutQuint: { value: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)' },
          easeInOutQuint: { value: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)' }
        },
        fonts: {},
        fontSizes: {
          xs: { value: '0.75em' },
          sm: { value: '0.875em' },
          base: { value: '1em' },
          lg: { value: '1.125em' },
          xl: { value: '1.375em' },
          h6: { value: '1.5em' },
          h5: { value: '1.625em' },
          h4: { value: '1.75em' },
          h3: { value: '1.875em' },
          h2: { value: '2em' },
          h1: { value: '2.25em' },
          rxs: { value: '0.75rem' },
          rsm: { value: '0.875rem' },
          rbase: { value: '1rem' },
          rlg: { value: '1.25rem' },
          rxl: { value: '1.375rem' },
          rh6: { value: '1.5rem' },
          rh5: { value: '1.625rem' },
          rh4: { value: '1.75rem' },
          rh3: { value: '1.875rem' },
          rh2: { value: '2rem' },
          rh1: { value: '2.25rem' }
        },
        fontWeights: {
          thin: { value: '100' },
          extralight: { value: '200' },
          light: { value: '300' },
          normal: { value: '400' },
          medium: { value: '500' },
          semibold: { value: '600' },
          bold: { value: '700' },
          extrabold: { value: '800' },
          black: { value: '900' }
        },
        gradients: {
          shimmer: {
            value: {
              type: 'linear',
              placement: 'to right',
              stops: [
                'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 0%',
                'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 15%',
                'color-mix(in srgb, {colors.neutral.12} 10%, transparent) 20%',
                'color-mix(in srgb, {colors.neutral.12} 20%, transparent) 25%',
                'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 30%'
              ]
            }
          }
        },
        letterSpacings: {},
        lineHeights: {
          none: { value: '1em' },
          tight: { value: '1.25em' },
          snug: { value: '1.375em' },
          normal: { value: '1.5em' },
          relaxed: { value: '1.625em' },
          loose: { value: '2em' }
        },
        radii: {
          none: { value: '0' },
          xs: { value: '0.125rem' },
          sm: { value: '0.25rem' },
          md: { value: '0.375rem' },
          lg: { value: '0.5rem' },
          xl: { value: '0.75rem' },
          xxl: { value: '1rem' },
          full: { value: '9999px' }
        },
        shadows: {},
        opacity: {},
        sizes: {},
        spacing: {
          none: { value: '0' },
          xs: { value: '0.25rem' },
          sm: { value: '0.5rem' },
          md: { value: '1rem' },
          lg: { value: '1.5rem' },
          xl: { value: '2rem' },
          xxl: { value: '3rem' },
          xxxl: { value: '4rem' }
        },
        zIndex: {}
      },
      animationStyles: {},
      keyframes: {
        ...shimmerKeyframes,
        ...pulseKeyframes,
        ...fadeKeyframes
      },
      semanticTokens: {
        colors: {
          neutral: neutral,
          ...semanticColors
        }
      }
    },
    conditions: {
      extend: {
        active: '&:is(:active, [data-active], [data-state="open"], [data-state="on"])',
        inactive: '&:is(:not(:active), [data-inactive], [data-state="closed"], [data-state="off"])',
        checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"], [data-state="on"])',
        unchecked:
          '&:is(:not(:checked), [data-unchecked], [aria-checked=false], [data-state="unchecked"], [data-state="off"])',
        expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="open"])',
        indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
        selected: '&:is([aria-selected=true], [data-selected], [data-state="checked"])',
        open: '&:is([open], [data-state="open"])',
        complete: '&:is([data-state="complete"])',
        loading: '&:is([data-loading], [aria-busy=true], [data-state="loading"])',
        visible: '&:is([data-visible], [data-state="visible"])',
        closed: '&:is([data-state="closed"])',
        sideLeft: '&:is([data-side="left"])',
        sideRight: '&:is([data-side="right"])',
        sideTop: '&:is([data-side="top"])',
        sideBottom: '&:is([data-side="bottom"])',
        alignStart: '&:is([data-align="start"])',
        alignCenter: '&:is([data-align="center"])',
        alignEnd: '&:is([data-align="end"])'
      }
    },
    globalCss: {
      '*, *:before, *:after': {
        boxSizing: 'border-box',
        margin: 0,
        padding: 0
      },
      body: {
        backgroundColor: 'neutral.1',
        color: 'neutral.12'
      },
      'img, picture, video, canvas, svg ': {
        display: 'block',
        maxWidth: '100%'
      },
      'input, button, textarea, select': {
        font: 'inherit'
      },
      button: {
        cursor: 'pointer'
      },
      'h1, h2, h3, h4, h5, h6': {
        fontWeight: 'bold',
        lineHeight: 'tight'
      },
      h1: {
        fontSize: 'h1'
      },
      h2: {
        fontSize: 'h2'
      },
      h3: {
        fontSize: 'h3'
      },
      h4: {
        fontSize: 'h4'
      },
      h5: {
        fontSize: 'h5'
      },
      h6: {
        fontSize: 'h6'
      },
      p: {
        fontSize: 'base',
        lineHeight: 'normal',
        textWrap: 'pretty'
      },
      small: {
        fontSize: 'xs'
      },
      a: {
        color: 'primary.9',
        textDecoration: 'none',
        fontWeight: 'semibold',
        _hover: {
          color: 'primary.10'
        }
      },
      '@media (prefers-reduced-motion: no-preference)': {
        html: {
          interpolateSize: 'allow-keywords'
        }
      }
    }
  })
}

export default srJuggernautPandaPreset

export { buttonVariants } from '@/recipes/button'
export { chipVariants } from '@/recipes/chip'
export { iconButtonShapes, iconButtonVariants } from '@/recipes/iconButton'
export { markVariants } from '@/recipes/mark'

export { BrandColor, ColorVariation, NeutralColor } from '@/types'