import { Box, Button } from '@tidbcloud/uikit'
import { IconRunFill } from '@tidbcloud/uikit/icons'

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

const RunBtn = ({
  runSqlHandler,
  isRunning,
  isExplaining
}: {
  runSqlHandler: (isRunAll: boolean, isExplain?: boolean) => void
  isRunning: boolean
  isExplaining: boolean
}) => {
  return (
    <>
      <Box id="RunButton">
        <Button
          data-testid="chat2query-run-btn"
          size="sm"
          mr={8}
          loading={isRunning}
          disabled={isRunning || isExplaining}
          data-mp-event="SQL Editor Executed"
          data-mp-source="Run Button"
          leftSection={<IconRunFill size={14} />}
          onClick={() => {
            reportGA({ event: 'chat2query_run_sql' })
            runSqlHandler(false, false)
          }}
        >
          Run
        </Button>
      </Box>

      <Button
        size="sm"
        mr={8}
        variant="outline"
        disabled={isRunning || isExplaining}
        data-mp-event="SQL Editor Explain Executed"
        data-mp-source="Run Button"
        onClick={() => runSqlHandler(false, true)}
      >
        Explain
      </Button>
    </>
  )
}

export default RunBtn