import React from 'react';
import { PhotoIcon } from '@heroicons/react/24/outline';
import { Button } from '@/client/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
import { FileSelector } from '@/client/components/FileSelector';
import { useClassroomContext } from './ClassroomProvider';
import { useAuth } from '../../hooks/AuthProvider';

export const ImageSelectorButton: React.FC = () => {
  const [showImageSelector, setShowImageSelector] = React.useState(false);
  const { sendImageMessageById } = useClassroomContext();
  const { user } = useAuth()

  const handleImageSelect = (fileId: number | null | number[]) => {
    if (fileId && typeof fileId === 'number') {
      // 使用文件ID发送图片消息
      sendImageMessageById(fileId);
      setShowImageSelector(false);
    }
  };

  return (
    <>
      {/* 图片选择按钮 */}
      <Button
        type="button"
        onClick={() => setShowImageSelector(true)}
        className="p-2 rounded-full bg-blue-500 text-white"
        title="选择图片"
        size="icon"
        variant="ghost"
      >
        <PhotoIcon className="w-4 h-4" />
      </Button>

      {/* 图片选择器对话框 */}
      <Dialog open={showImageSelector} onOpenChange={setShowImageSelector}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>选择图片</DialogTitle>
            <DialogDescription>
              选择要发送的图片文件
            </DialogDescription>
          </DialogHeader>
          
          <FileSelector
            filterType="image"
            allowMultiple={false}
            showPreview={true}
            placeholder="选择图片"
            title="选择图片"
            description="选择要发送的图片文件"
            onChange={handleImageSelect}
            uploadUserId={user?.id}
          />

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => setShowImageSelector(false)}
            >
              取消
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};