import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { IconButton } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { useNimChat } from '@/context/NimChat/useNimChat'
import ChatConversationsDeleteDialog from './ChatConversationsDeleteDialog'
import { useState } from 'react'

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

const ChatSidebarAction = ({
  onSearchClick,
  onCancelSearch,
  isSearchActive = false,
}: ChatSidebarActionProps) => {
  const { nim } = useNimChat()
  const [isDeleteMessageDialogOpen, setIsDeleteMessageDialogOpen] = useState(false)

  const handleClearAll = () => {
    nim?.V2NIMConversationService.clearTotalUnreadCount()
  }

  const handleSearchClick = () => {
    if (isSearchActive) {
      onCancelSearch?.()
    } else {
      onSearchClick?.()
    }
  }

  const handleDeleteAll = () => {
    setIsDeleteMessageDialogOpen(true)
  }

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <IconButton size="small" variant="ghost">
            <i className="iconfont icon-More" />
          </IconButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56" align="end">
          <DropdownMenuItem onClick={handleClearAll}>
            <i className="iconfont icon-clear" />
            <span>Mark All</span>
          </DropdownMenuItem>
          <DropdownMenuItem onClick={handleSearchClick}>
            <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={handleDeleteAll}>
            <i className="iconfont icon-trashcan" />
            <span>Clear Chat List</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <ChatConversationsDeleteDialog
        open={isDeleteMessageDialogOpen}
        onOpenChange={setIsDeleteMessageDialogOpen}
      />
    </>
  )
}

export default ChatSidebarAction
