import React from 'react'

import { Alert, Group, Skeleton, Stack } from '@tidbcloud/uikit'
import { IconAlertTriangle } from '@tidbcloud/uikit/icons'

import { ClusterComputed } from '~/hooks/state'

import { StatementModel } from '../utils/type'
import { PlanDetailTabs } from './PlanDetailTabs'

type PlanDetailProps = {
  planDetail?: StatementModel
  loading: boolean
  computed: ClusterComputed
}

export const PlanDetail: React.FC<React.PropsWithChildren<PlanDetailProps>> = ({
  computed,
  planDetail,
  loading
}) => {
  return (
    <Stack px='xs' py='md'>
      {computed.isDedicated && planDetail?.plan_digest && (
        <Alert color='yellow' icon={<IconAlertTriangle />}>
          To create the SQL binding, please review the execution plan details
          below. Once confirmed, click the "Create SQL Binding" button to
          proceed. The binding you create may not appear on this page
          immediately and can be delayed by up to 30 minutes.
        </Alert>
      )}

      {loading && (
        <Group gap='xs'>
          <Skeleton height={10} />
          <Skeleton height={10} />
          <Skeleton height={10} width='70%' />
        </Group>
      )}

      {!loading && planDetail && (
        <>
          {/* <StmtSQL title="Query Sample" sql={planDetail.query_sample_text ?? ''} /> */}
          {/* {planDetail.prev_sample_text && <StmtSQL title="Previous Query Sample" sql={planDetail.prev_sample_text!} />} */}
          <PlanDetailTabs data={planDetail} />
        </>
      )}
    </Stack>
  )
}