import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { IconButton } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useStreamChatStore } from '@/stores/stream-chat';
import { useAsyncFn } from '@/hooks/tools';

interface ChatSidebarActionProps {
  onSearchClick?: () => void;
  onCancelSearch?: () => void;
  isSearchActive?: boolean;
}

const ChatSidebarAction = ({
  onSearchClick,
  onCancelSearch,
  isSearchActive = false,
}: ChatSidebarActionProps) => {
  const clearNotifications = useStreamChatStore((state) => state.clearNotifications);
  const clearChannels = useStreamChatStore((state) => state.clearChannels);
  const [isDeleteMessageDialogOpen, setIsDeleteMessageDialogOpen] = useState(false);
  const router = useRouter();

  const { run: handleClearChannels, loading } = useAsyncFn(async () => {
    await clearChannels();
    setIsDeleteMessageDialogOpen(false);
    router.replace('/');
  });

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <IconButton size="small" variant="ghost">
            <i className="iconfont icon-More" />
          </IconButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56" align="end">
          <DropdownMenuItem onClick={clearNotifications}>
            <i className="iconfont icon-clear" />
            <span>Mark All</span>
          </DropdownMenuItem>
          <DropdownMenuItem onClick={isSearchActive ? onCancelSearch : onSearchClick}>
            <i className={`iconfont icon-Search`} />
            <span>{isSearchActive ? 'Cancel' : 'Search'}</span>
          </DropdownMenuItem>
          <div className="my-3 px-2">
            <Separator className="bg-outline-normal" />
          </div>
          <DropdownMenuItem onClick={() => setIsDeleteMessageDialogOpen(true)}>
            <i className="iconfont icon-trashcan" />
            <span>Clear Chat List</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      {/* 删除全部 确认modal */}
      <AlertDialog open={isDeleteMessageDialogOpen} onOpenChange={setIsDeleteMessageDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Clear Chat List</AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogDescription>
            This will clear your chat list. Your individual messages will remain intact.
          </AlertDialogDescription>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              variant="destructive"
              loading={loading}
              onClick={handleClearChannels}
            >
              Clear
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
};

export default ChatSidebarAction;