import { Box, Group, Text, Button } from "@mantine/core";
import { useTranslation } from "react-i18next";

interface MultiSelectControlsProps {
  selectedCount: number;
  onClearSelection: () => void;
  onOpenInFileEditor?: () => void;
  onOpenInPageEditor?: () => void;
  onAddToUpload?: () => void;
  onDeleteAll?: () => void;
}

const MultiSelectControls = ({
  selectedCount,
  onClearSelection,
  onOpenInFileEditor,
  onOpenInPageEditor,
  onAddToUpload,
  onDeleteAll,
}: MultiSelectControlsProps) => {
  const { t } = useTranslation();

  if (selectedCount === 0) return null;

  return (
    <Box
      mb="md"
      p="md"
      style={{
        backgroundColor: "var(--mantine-color-blue-0)",
        borderRadius: 8,
      }}
    >
      <Group justify="space-between">
        <Text size="sm">
          {selectedCount} {t("fileManager.filesSelected", "files")}
        </Text>
        <Group>
          <Button size="xs" variant="light" onClick={onClearSelection}>
            {t("fileManager.clearSelection", "Clear files")}
          </Button>

          {onAddToUpload && (
            <Button size="xs" color="green" onClick={onAddToUpload}>
              {t("fileManager.addToUpload", "Add to Upload")}
            </Button>
          )}

          {onOpenInFileEditor && (
            <Button
              size="xs"
              color="orange"
              onClick={onOpenInFileEditor}
              disabled={selectedCount === 0}
            >
              {t("fileManager.openInFileEditor", "Open in File Editor")}
            </Button>
          )}

          {onOpenInPageEditor && (
            <Button
              size="xs"
              color="blue"
              onClick={onOpenInPageEditor}
              disabled={selectedCount === 0}
            >
              {t("fileManager.openInPageEditor", "Open in Page Editor")}
            </Button>
          )}

          {onDeleteAll && (
            <Button size="xs" color="red" onClick={onDeleteAll}>
              {t("fileManager.deleteAll", "Delete All")}
            </Button>
          )}
        </Group>
      </Group>
    </Box>
  );
};

export default MultiSelectControls;
