import { defineRecipe } from '@pandacss/dev'

export const inputSizes = ['small', 'medium', 'large'] as const
export interface InputRecipeArg {
  semanticColorNames: string[]
}

export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
  const colorVariants = ['neutral', ...semanticColorNames]

  return defineRecipe({
    className: 'input',
    base: {
      display: 'inline-flex',
      borderRadius: 'sm',
      border: '1px solid',
      outline: 'none',
      transitionProperty: 'color, background-color, border-color',
      transitionDuration: 'normal',
      transitionTimingFunction: 'easeOut',
      cursor: 'text',
      focusVisibleRing: 'outside',
      focusRingWidth: '2px',
      focusRingOffset: '0px',
      _disabled: {
        cursor: 'not-allowed'
      }
    },
    variants: {
      size: {
        ...Object.fromEntries(
          inputSizes.map((size) => {
            switch (size) {
              case 'small':
                return [
                  size,
                  {
                    paddingBlock: 'calc({spacing.xs} * 0.5)',
                    paddingInline: 'calc({spacing.xs} * 1)',
                    fontSize: 'sm'
                  }
                ]
              case 'medium':
                return [
                  size,
                  {
                    paddingBlock: 'calc({spacing.xs} * 0.75)',
                    paddingInline: 'calc({spacing.xs} * 1.25)',
                    fontSize: 'base'
                  }
                ]
              case 'large':
                return [
                  size,
                  {
                    paddingBlock: 'calc({spacing.xs} * 1)',
                    paddingInline: 'calc({spacing.xs} * 1.5)',
                    fontSize: 'lg'
                  }
                ]
              default:
                return [size, {}]
            }
          })
        )
      },
      color: {
        ...Object.fromEntries(
          colorVariants.map((color) => [
            color,
            {
              borderColor: `${color}.6`,
              backgroundColor: `${color}.2`,
              color: `${color}.12`,
              focusRingColor: `{colors.${color}.7}`,
              _placeholder: {
                color: `${color}.11`
              },
              _hover: {
                backgroundColor: `${color}.3`
              },
              _active: {
                backgroundColor: `${color}.4`
              },
              _focus: {
                backgroundColor: `${color}.3`,
                borderColor: `${color}.7`
              },
              _disabled: {
                backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
                color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`,
                borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
                _placeholder: {
                  color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
                },
                _hover: {
                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
                  borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
                  color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
                },
                _focus: {
                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
                  borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
                  color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
                }
              }
            }
          ])
        )
      },
      fullWidth: {
        true: {
          width: '100%'
        }
      }
    },
    defaultVariants: {
      size: 'medium',
      color: 'neutral'
    }
  })
}

export default inputRecipe