dify/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx

import type { FC } from 'react'
import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine, RiDraftLine } from '@remixicon/react'
import { useBoolean } from 'ahooks'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import Confirm from '@/app/components/base/confirm'
import Divider from '@/app/components/base/divider'
import { cn } from '@/utils/classnames'

const i18nPrefix = 'dataset.batchAction'
type IBatchActionProps = {
  className?: string
  selectedIds: string[]
  onBatchEnable: () => void
  onBatchDisable: () => void
  onBatchDelete: () => Promise<void>
  onArchive?: () => void
  onEditMetadata?: () => void
  onCancel: () => void
}

const BatchAction: FC<IBatchActionProps> = ({
  className,
  selectedIds,
  onBatchEnable,
  onBatchDisable,
  onArchive,
  onBatchDelete,
  onEditMetadata,
  onCancel,
}) => {
  const { t } = useTranslation()
  const [isShowDeleteConfirm, {
    setTrue: showDeleteConfirm,
    setFalse: hideDeleteConfirm,
  }] = useBoolean(false)
  const [isDeleting, {
    setTrue: setIsDeleting,
  }] = useBoolean(false)

  const handleBatchDelete = async () => {
    setIsDeleting()
    await onBatchDelete()
    hideDeleteConfirm()
  }
  return (
    <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
      <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
        <div className="inline-flex items-center gap-x-2 py-1 pl-2 pr-3">
          <span className="system-xs-medium flex h-5 w-5 items-center justify-center rounded-md bg-text-accent text-text-primary-on-surface">
            {selectedIds.length}
          </span>
          <span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`)}</span>
        </div>
        <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
        <Button
          variant="ghost"
          className="gap-x-0.5 px-3"
          onClick={onBatchEnable}
        >
          <RiCheckboxCircleLine className="size-4" />
          <span className="px-0.5">{t(`${i18nPrefix}.enable`)}</span>
        </Button>
        <Button
          variant="ghost"
          className="gap-x-0.5 px-3"
          onClick={onBatchDisable}
        >
          <RiCloseCircleLine className="size-4" />
          <span className="px-0.5">{t(`${i18nPrefix}.disable`)}</span>
        </Button>
        {onEditMetadata && (
          <Button
            variant="ghost"
            className="gap-x-0.5 px-3"
            onClick={onEditMetadata}
          >
            <RiDraftLine className="size-4" />
            <span className="px-0.5">{t('dataset.metadata.metadata')}</span>
          </Button>
        )}

        {onArchive && (
          <Button
            variant="ghost"
            className="gap-x-0.5 px-3"
            onClick={onArchive}
          >
            <RiArchive2Line className="size-4" />
            <span className="px-0.5">{t(`${i18nPrefix}.archive`)}</span>
          </Button>
        )}
        <Button
          variant="ghost"
          destructive
          className="gap-x-0.5 px-3"
          onClick={showDeleteConfirm}
        >
          <RiDeleteBinLine className="size-4" />
          <span className="px-0.5">{t(`${i18nPrefix}.delete`)}</span>
        </Button>

        <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
        <Button
          variant="ghost"
          className="px-3"
          onClick={onCancel}
        >
          <span className="px-0.5">{t(`${i18nPrefix}.cancel`)}</span>
        </Button>
      </div>
      {
        isShowDeleteConfirm && (
          <Confirm
            isShow
            title={t('datasetDocuments.list.delete.title')}
            content={t('datasetDocuments.list.delete.content')}
            confirmText={t('common.operation.sure')}
            onConfirm={handleBatchDelete}
            onCancel={hideDeleteConfirm}
            isLoading={isDeleting}
            isDisabled={isDeleting}
          />
        )
      }
    </div>
  )
}

export default React.memo(BatchAction)