import { Box, Group, Progress, Stack, Typography } from '@tidbcloud/uikit'
import React, { ReactNode, useMemo } from 'react'

import {
  Import as ServerlessImport,
  ImportSourceTypeEnum as ServerlessImportSourceTypeEnum,
  ImportStateEnum as ServerlessImportStateEnum
} from 'dbaas/services/api-clients/legacy/serverless/interface'
import { DataflowImportGetResp, DataflowImportGetRespStatus } from 'dbaas/services/dataflow/interface'

const ImportProgressBar = ({
  title,
  percent,
  isWaiting = false,
  message = '',
  cancelButton,
  isCancel
}: {
  title: React.ReactNode
  percent: number
  isWaiting?: boolean
  message?: string
  cancelButton?: React.ReactNode
  isCancel?: boolean
}) => {
  const isError = percent < 100 && !isWaiting && message.length > 0
  const isSuccess = !isError && percent === 100
  const status = useMemo(() => {
    if (isError) return `Failed`
    if (isSuccess) return 'Finished'
    if (isWaiting) return 'Waiting'
    if (isCancel) return 'Canceled'
    return 'Running'
  }, [isError, isSuccess, isWaiting, isCancel])

  const color = useMemo(() => {
    if (isSuccess) return 'green'
    if (isError) return 'red'
    if (status === 'Running') return 'peacock'
    return 'gray'
  }, [isSuccess, isError, status])

  return (
    <Box>
      <Stack gap={0}>
        <Group justify="space-between">
          <Typography variant="body-md">{title}</Typography>

          <Group gap={8}>
            <Typography color={color} span>
              {percent}%
            </Typography>
            {status === 'Running' && cancelButton}
          </Group>
        </Group>

        <Progress value={percent} color={color} />
      </Stack>

      {isError && (
        <Typography color="red" mt={4} fz={13}>
          {message || 'Some error occurred'}
        </Typography>
      )}
    </Box>
  )
}

export const ImportProgressContent = ({
  cancelButton,
  data
}: {
  cancelButton?: ReactNode
  data: DataflowImportGetResp | ServerlessImport
}) => {
  const isCancel = (() => {
    if ('status' in data) {
      return (
        data.status === DataflowImportGetRespStatus.CANCELING || data.status === DataflowImportGetRespStatus.CANCELED
      )
    }
    if ('state' in data) {
      return data.state === ServerlessImportStateEnum.CANCELING || data.state === ServerlessImportStateEnum.CANCELED
    }
    return false
  })()

  const isLocalImport = (() => {
    if ('import_create_req' in data) {
      return !!data.import_create_req?.local_import_cfg
    }
    if ('creation_details' in data) {
      return data.creation_details?.source?.type === ServerlessImportSourceTypeEnum.LOCAL
    }
    return false
  })()

  const fileName = (() => {
    if ('import_create_req' in data) {
      return data.import_create_req?.local_import_cfg?.original_file_name
    }
    if ('creation_details' in data) {
      return data.creation_details?.source?.local?.file_name
    }
    return ''
  })()

  const percent = (() => {
    if ('completed_percent' in data) {
      return data.completed_percent ?? 0
    }
    if ('complete_percent' in data) {
      return data.complete_percent ?? 0
    }
    return 0
  })()

  return (
    <div className="wd-flex wd-flex-col wd-gap-4">
      <ImportProgressBar
        title={
          isLocalImport ? (
            <Typography variant="body-md" truncate maw={300}>
              {fileName}
            </Typography>
          ) : (
            <div>1. Import Data</div>
          )
        }
        cancelButton={cancelButton}
        isWaiting={false}
        isCancel={isCancel}
        message={data.message}
        percent={percent}
      />
      {!isLocalImport && 'post_import_completed_percent' in data && (
        <ImportProgressBar
          title={<div>2. Validate Data</div>}
          cancelButton={cancelButton}
          isCancel={isCancel}
          isWaiting={percent < 100}
          message={data.message}
          percent={data.post_import_completed_percent ?? 0}
        />
      )}
    </div>
  )
}