import { defineRecipe } from '@pandacss/dev'

export const fileInputRecipe = defineRecipe({
  className:'fileInput',
  base: {
    display: 'inline-flex',
    alignItems: 'center',
    cursor: 'pointer',
    userSelect: 'none',
    width: 'clamp(3rem, 20rem, 100%)',
    height: 'token(spacing.10)',
    paddingInlineEnd: 'token(spacing.3)',
    fontSize: 'token(fontSizes.md)',
    lineHeight: 'token(lineHeights.loose)',
    borderRadius: 'var(--radius-field)',
    backgroundColor: 'base-100',
    '--input-color': 'color-mix(in oklab, token(colors.base-content) 20%, transparent)',
    border: 'var(--border, 1px) solid var(--input-color)',
    boxShadow: '0 1px color-mix(in oklab, var(--input-color) 10%, transparent) inset, 0 -1px oklch(100% 0 0 / 0.1) inset',
    '&::file-selector-button': {
      marginInlineEnd: 'token(spacing.4)',
      cursor: 'pointer',
      userSelect: 'none',
      paddingInline: 'token(spacing.4)',
      height: 'calc(100% + var(--border, 1px) * 2)',
      marginBlock: 'calc(var(--border, 1px) * -1)',
      marginInlineStart: 'calc(var(--border, 1px) * -1)',
      fontSize: 'token(fontSizes.md)',
      fontWeight: 'token(fontWeights.semibold)',
      borderWidth: 'var(--border, 1px)',
      borderStyle: 'solid',
      borderColor: 'color-mix(in oklab, token(colors.base-200), #000 5%)',
      borderStartStartRadius: 'calc(var(--radius-field) - var(--border, 1px))',
      borderEndStartRadius: 'calc(var(--radius-field) - var(--border, 1px))',
      borderStartEndRadius: '0',
      borderEndEndRadius: '0',
      color: 'base-content',
      backgroundColor: 'base-200',
    },
    _focus: {
      '--input-color': 'token(colors.base-content)',
      boxShadow: '0 1px color-mix(in oklab, var(--input-color) 10%, transparent)',
      outline: '2px solid var(--input-color)',
      outlineOffset: '2px',
    },
    _disabled: {
      borderColor: 'base-200',
      backgroundColor: 'base-200',
      cursor: 'not-allowed',
      boxShadow: 'none',
      '&::file-selector-button': { cursor: 'not-allowed', backgroundColor: 'base-200' },
    },
  },
  variants: {
    color: {
      neutral: { '&::file-selector-button': { backgroundColor: 'neutral', color: 'neutral-content' } },
      primary: { '&::file-selector-button': { backgroundColor: 'primary', color: 'primary-content' } },
      secondary: { '&::file-selector-button': { backgroundColor: 'secondary', color: 'secondary-content' } },
      accent: { '&::file-selector-button': { backgroundColor: 'accent', color: 'accent-content' } },
      info: { '&::file-selector-button': { backgroundColor: 'info', color: 'info-content' } },
      success: { '&::file-selector-button': { backgroundColor: 'success', color: 'success-content' } },
      warning: { '&::file-selector-button': { backgroundColor: 'warning', color: 'warning-content' } },
      error: { '&::file-selector-button': { backgroundColor: 'error', color: 'error-content' } },
    },
    size: {
      xs: { height: 'token(spacing.6)', fontSize: 'token(fontSizes.xs)', lineHeight: 'token(spacing.4)' },
      sm: { height: 'token(spacing.8)', fontSize: 'token(fontSizes.sm)', lineHeight: 'token(spacing.6)' },
      md: { height: 'token(spacing.10)', fontSize: 'token(fontSizes.md)', lineHeight: 'token(lineHeights.loose)' },
      lg: { height: 'token(spacing.12)', fontSize: 'token(fontSizes.xl)', lineHeight: 'token(spacing.10)' },
      xl: { height: 'token(spacing.14)', fontSize: 'token(fontSizes.xl)', lineHeight: 'token(spacing.12)', paddingInlineEnd: 'token(spacing.6)' },
    },
    ghost: {
      true: {
        backgroundColor: 'transparent',
        boxShadow: 'none',
        borderColor: 'transparent',
        '&::file-selector-button': { marginInlineStart: '0' },
      },
    },
  },
  defaultVariants: {
    size: 'md',
  },
})