import { Button } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useFormContext } from 'react-hook-form'

import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'

interface CancelButtonProps {
  onCancel: () => void
  servicePlan: Commonv1beta1ServicePlan
}

export const CancelButton = observer(({ onCancel, servicePlan }: CancelButtonProps) => {
  const {
    formState: { dirtyFields }
  } = useFormContext()

  return (
    <Button
      variant="default"
      onClick={onCancel}
      data-mp-event="Cancel Created A Cluster"
      data-mp-service-plan={servicePlan}
      data-mp-filled-fields={['provider', 'region', 'name'].filter((key) => dirtyFields?.[key]).join(', ')}
    >
      Cancel
    </Button>
  )
})