import { Button, ButtonProps, Box } from '@tidbcloud/uikit'
import React from 'react'
import { Link } from 'react-router-dom'

import { eventTracking } from 'dbaas/utils/tracking'

export interface LinkButtonProps extends ButtonProps {
  className?: string
  link?: boolean
  disabled?: boolean
  to?: string
  eventName?: string
  eventParams?: { [key: string]: string }
  onClick?: React.MouseEventHandler<HTMLButtonElement>
}

export const LinkButton: React.FC<React.PropsWithChildren<LinkButtonProps>> = ({
  link = true,
  to,
  className,
  disabled,
  children,
  eventName,
  eventParams = {},
  onClick,
  ...rest
}) => {
  const clickHandler = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    if (disabled) {
      e.preventDefault()
      e.stopPropagation()
      return
    }
    if (eventName) {
      eventTracking(eventName, {
        ...eventParams
      })
    }

    onClick?.(e)
  }

  const btn = link ? (
    <Box
      component="button"
      sx={(theme) => ({
        outline: 'none',
        background: 'transparent',
        textDecoration: 'none',
        border: 'none',
        cursor: disabled ? 'not-allowed' : 'pointer',
        margin: 0,
        padding: 0,
        color: disabled ? theme.colors.carbon[5] : theme.colors.blue[7]
      })}
      onClick={clickHandler}
    >
      {children}
    </Box>
  ) : (
    <Button className={className} disabled={disabled} onClick={clickHandler} {...rest}>
      {children}
    </Button>
  )
  return to && !disabled ? <Link to={to}>{btn}</Link> : btn
}