dify/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx

import type { FC } from 'react'
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogTitle,
} from '@langgenius/dify-ui/alert-dialog'
import { Button } from '@langgenius/dify-ui/button'
import { RiLoader2Line } from '@remixicon/react'
import { useCountDown } from 'ahooks'
import * as React from 'react'
import { useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useEventEmitterContextContext } from '@/context/event-emitter'

type IDefaultContentProps = {
  onCancel: () => void
  onConfirm: () => void
}

const DefaultContent: FC<IDefaultContentProps> = React.memo(({ onCancel, onConfirm }) => {
  const { t } = useTranslation()

  return (
    <>
      <div className="pb-4">
        <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
          {t(($) => $['segment.regenerationConfirmTitle'], { ns: 'datasetDocuments' })}
        </AlertDialogTitle>
        <AlertDialogDescription className="system-md-regular text-text-secondary">
          {t(($) => $['segment.regenerationConfirmMessage'], { ns: 'datasetDocuments' })}
        </AlertDialogDescription>
      </div>
      <div className="flex justify-end gap-x-2 pt-6">
        <Button onClick={onCancel}>{t(($) => $['operation.cancel'], { ns: 'common' })}</Button>
        <Button variant="primary" tone="destructive" onClick={onConfirm}>
          {t(($) => $['operation.regenerate'], { ns: 'common' })}
        </Button>
      </div>
    </>
  )
})

DefaultContent.displayName = 'DefaultContent'

const RegeneratingContent: FC = React.memo(() => {
  const { t } = useTranslation()

  return (
    <>
      <div className="pb-4">
        <span className="title-2xl-semi-bold text-text-primary">
          {t(($) => $['segment.regeneratingTitle'], { ns: 'datasetDocuments' })}
        </span>
        <p className="system-md-regular text-text-secondary">
          {t(($) => $['segment.regeneratingMessage'], { ns: 'datasetDocuments' })}
        </p>
      </div>
      <div className="flex justify-end pt-6">
        <Button
          variant="primary"
          tone="destructive"
          disabled
          className="inline-flex items-center gap-x-0.5"
        >
          <RiLoader2Line className="size-4 animate-spin text-components-button-destructive-primary-text-disabled" />
          <span>{t(($) => $['operation.regenerate'], { ns: 'common' })}</span>
        </Button>
      </div>
    </>
  )
})

RegeneratingContent.displayName = 'RegeneratingContent'

type IRegenerationCompletedContentProps = {
  onClose: () => void
}

const RegenerationCompletedContent: FC<IRegenerationCompletedContentProps> = React.memo(
  ({ onClose }) => {
    const { t } = useTranslation()
    const targetTime = useRef(Date.now() + 5000)
    const [countdown] = useCountDown({
      targetDate: targetTime.current,
      onEnd: () => {
        onClose()
      },
    })

    return (
      <>
        <div className="pb-4">
          <span className="title-2xl-semi-bold text-text-primary">
            {t(($) => $['segment.regenerationSuccessTitle'], { ns: 'datasetDocuments' })}
          </span>
          <p className="system-md-regular text-text-secondary">
            {t(($) => $['segment.regenerationSuccessMessage'], { ns: 'datasetDocuments' })}
          </p>
        </div>
        <div className="flex justify-end pt-6">
          <Button variant="primary" onClick={onClose}>
            {`${t(($) => $['operation.close'], { ns: 'common' })}${countdown === 0 ? '' : `(${Math.round(countdown / 1000)})`}`}
          </Button>
        </div>
      </>
    )
  },
)

RegenerationCompletedContent.displayName = 'RegenerationCompletedContent'

type IRegenerationModalProps = {
  isShow: boolean
  onConfirm: () => void
  onCancel: () => void
  onClose: () => void
}

const RegenerationModal: FC<IRegenerationModalProps> = ({
  isShow,
  onConfirm,
  onCancel,
  onClose,
}) => {
  const [loading, setLoading] = useState(false)
  const [updateSucceeded, setUpdateSucceeded] = useState(false)
  const { eventEmitter } = useEventEmitterContextContext()

  eventEmitter?.useSubscription((v) => {
    if (v === 'update-segment') {
      setLoading(true)
      setUpdateSucceeded(false)
    }
    if (v === 'update-segment-success') setUpdateSucceeded(true)
    if (v === 'update-segment-done') setLoading(false)
  })

  return (
    <AlertDialog open={isShow}>
      <AlertDialogContent className="w-[calc(100vw-2rem)] max-w-120! overflow-hidden! rounded-2xl! border-none p-6 text-left align-middle shadow-xl">
        {!loading && !updateSucceeded && (
          <DefaultContent onCancel={onCancel} onConfirm={onConfirm} />
        )}
        {loading && !updateSucceeded && <RegeneratingContent />}
        {!loading && updateSucceeded && <RegenerationCompletedContent onClose={onClose} />}
      </AlertDialogContent>
    </AlertDialog>
  )
}

export default RegenerationModal