import { Group, Skeleton, Stack, Title } from '@tidbcloud/uikit'
import React from 'react'

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

import { ExecutionPlan } from './ExecutionPlan'
import { PlanDetailTabs } from './PlanDetailTabs'
import { RelatedSlowQuery } from './slow-query/RelatedSlowQuery'
import { StmtSQL } from './StmtSQL'

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

export const PlanDetail: React.FC<React.PropsWithChildren<PlanDetailProps>> = ({ planDetail, loading }) => {
  return (
    <Stack>
      <Title order={4}>Execution Detail</Title>

      {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!} />}
          {(planDetail.binary_plan_text || planDetail.plan) && (
            <ExecutionPlan data={planDetail.binary_plan_text || planDetail.plan || ''} />
          )}
          <PlanDetailTabs data={planDetail} />
          <RelatedSlowQuery />
        </>
      )}
    </Stack>
  )
}