import { Box, Button, ButtonProps } from '@tidbcloud/uikit'
import { keyframes } from '@tidbcloud/uikit/emotion'
import type { ButtonHTMLAttributes } from 'react'

interface RainbowButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'style'>,
    Omit<ButtonProps, 'data-disabled'> {
  [k: `data-${string}`]: string
}

const rainbowAnimation = keyframes({
  '0%': {
    backgroundPosition: '0%'
  },
  '100%': {
    backgroundPosition: '200%'
  }
})

const rainbowGradient =
  'linear-gradient(90deg, hsl(0 80% 63%), hsl(90 80% 63%), hsl(210 80% 63%), hsl(195 80% 63%), hsl(270 80% 63%))'

export const RainbowButton = (props: RainbowButtonProps) => {
  const { disabled } = props

  if (disabled) {
    return <Button {...props} variant="default" disabled />
  }

  return (
    <Box
      component="span"
      sx={(theme, u) => ({
        display: 'inline-block',
        position: 'relative',
        overflow: 'visible',
        borderRadius: theme.defaultRadius,
        backgroundImage: [
          'linear-gradient(#ffffff, #ffffff)',
          'linear-gradient(#ffffff 50%, rgba(18,18,19,0.6) 80%, rgba(18,18,19,0))',
          rainbowGradient
        ].join(','),
        [u.dark]: {
          backgroundImage: [
            'linear-gradient(#0a0a0a, #0a0a0a)',
            'linear-gradient(#0a0a0a 50%, rgba(255,255,255,0.6) 80%, rgba(0,0,0,0))',
            rainbowGradient
          ].join(',')
        },
        backgroundSize: '200%',
        backgroundOrigin: 'border-box',
        backgroundClip: 'padding-box, border-box, border-box',
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'var(--mantine-color-carbon-5)',
        borderBottomColor: 'transparent',
        animation: `${rainbowAnimation} 2s linear infinite`,
        '&::before': {
          content: '""',
          position: 'absolute',
          bottom: '-20%',
          left: '50%',
          transform: 'translateX(-50%)',
          height: '20%',
          width: '60%',
          backgroundImage: rainbowGradient,
          backgroundSize: '200%',
          filter: 'blur(0.75rem)',
          zIndex: 0,
          animation: `${rainbowAnimation} 2s linear infinite`
        }
      })}
    >
      <Button {...props} variant="transparent" c="carbon.9" />
    </Box>
  )
}