YG-Datasets/easy-dataset-main/app/projects/[projectId]/questions/components/QuestionsPageHeader.js

'use client';

import { useState } from 'react';
import { Box, Typography, Button, Tooltip, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
import { useTranslation } from 'react-i18next';
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import DatasetIcon from '@mui/icons-material/Dataset';
import ChatIcon from '@mui/icons-material/Chat';
import ImageIcon from '@mui/icons-material/Image';
import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
import DownloadIcon from '@mui/icons-material/Download';

export default function QuestionsPageHeader({
  questionsTotal,
  selectedQuestionsCount,
  onBatchDeleteQuestions,
  onOpenCreateDialog,
  onOpenCreateTemplateDialog,
  onBatchGenerateAnswers,
  onAutoGenerateDatasets,
  onAutoGenerateMultiTurnDatasets,
  onAutoGenerateImageDatasets,
  onExportQuestions,
  activeTab
}) {
  const { t } = useTranslation();
  const [anchorEl, setAnchorEl] = useState(null);
  const [createAnchorEl, setCreateAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const createMenuOpen = Boolean(createAnchorEl);

  const handleMenuClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const handleCreateMenuClick = event => {
    setCreateAnchorEl(event.currentTarget);
  };

  const handleCreateMenuClose = () => {
    setCreateAnchorEl(null);
  };

  const handleCreateQuestion = () => {
    handleCreateMenuClose();
    onOpenCreateDialog();
  };

  const handleCreateTemplate = () => {
    handleCreateMenuClose();
    onOpenCreateTemplateDialog();
  };

  const handleSingleTurnGenerate = () => {
    handleMenuClose();
    onAutoGenerateDatasets();
  };

  const handleMultiTurnGenerate = () => {
    handleMenuClose();
    onAutoGenerateMultiTurnDatasets();
  };

  const handleImageDatasetGenerate = () => {
    handleMenuClose();
    onAutoGenerateImageDatasets();
  };

  return (
    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
      <Typography variant="h4">
        {t('questions.title')} ({questionsTotal})
      </Typography>
      <Box sx={{ display: 'flex', gap: 2 }}>
        <Button variant="outlined" startIcon={<DownloadIcon />} onClick={onExportQuestions}>
          {t('questions.exportQuestions')}
        </Button>

        <Button
          variant="outlined"
          color={selectedQuestionsCount > 0 ? 'error' : 'primary'}
          startIcon={<DeleteIcon />}
          onClick={onBatchDeleteQuestions}
          disabled={selectedQuestionsCount === 0}
        >
          {t('questions.deleteSelected')}
        </Button>

        <Button
          variant="contained"
          startIcon={<AddIcon />}
          endIcon={<ArrowDropDownIcon />}
          onClick={handleCreateMenuClick}
        >
          {t('questions.createQuestion')}
        </Button>

        <Menu
          anchorEl={createAnchorEl}
          open={createMenuOpen}
          onClose={handleCreateMenuClose}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right'
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right'
          }}
        >
          <MenuItem onClick={handleCreateQuestion}>
            <ListItemIcon>
              <AddIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText primary={t('questions.createNormalQuestion')} />
          </MenuItem>
          <MenuItem onClick={handleCreateTemplate}>
            <ListItemIcon>
              <LibraryAddIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText primary={t('questions.createQuestionTemplate')} />
          </MenuItem>
        </Menu>

        {/* <Button
          variant="contained"
          startIcon={<AutoFixHighIcon />}
          onClick={onBatchGenerateAnswers}
          disabled={selectedQuestionsCount === 0}
        >
          {t('questions.batchGenerate')}
        </Button> */}

        <Tooltip
          title={t('questions.autoGenerateDatasetTip', {
            defaultValue: '创建后台批量处理任务：自动查询待生成答案的问题并生成数据集'
          })}
        >
          <Button
            variant="outlined"
            color="secondary"
            startIcon={<AutoFixHighIcon />}
            endIcon={<ArrowDropDownIcon />}
            onClick={handleMenuClick}
          >
            {t('questions.autoGenerateDataset', { defaultValue: '自动生成数据集' })}
          </Button>
        </Tooltip>

        <Menu
          anchorEl={anchorEl}
          open={open}
          onClose={handleMenuClose}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right'
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right'
          }}
        >
          <MenuItem onClick={handleSingleTurnGenerate}>
            <ListItemIcon>
              <DatasetIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText primary={t('questions.generateSingleTurnDataset', { defaultValue: '生成单轮对话数据集' })} />
          </MenuItem>
          <MenuItem onClick={handleMultiTurnGenerate}>
            <ListItemIcon>
              <ChatIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText primary={t('questions.generateMultiTurnDataset', { defaultValue: '生成多轮对话数据集' })} />
          </MenuItem>
          <MenuItem onClick={handleImageDatasetGenerate}>
            <ListItemIcon>
              <ImageIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText primary={t('questions.generateImageDataset', { defaultValue: '生成图像问答数据集' })} />
          </MenuItem>
        </Menu>
      </Box>
    </Box>
  );
}