import React from 'react'

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

import { StmtSQL } from '../../SQLRepository/Detail/StmtSQL'
import { StatementV2Model } from '../types'
import { ExecutionPlan } from './ExecutionPlan'
import { PlanDetailTabs } from './PlanDetailTabs'

interface PlanDetailProps {
  planDetail?: StatementV2Model
  loading: boolean
  showRU: boolean
}

export const PlanDetail: React.FC<PlanDetailProps> = ({
  planDetail,
  loading,
  showRU
}) => (
  <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 && (
      <>
        {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} showRU={showRU} />
      </>
    )}
  </Stack>
)