'use client'

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/ui/dropdown-menu'
import { IconButton } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import DeleteMessageDialog from './DeleteMessageDialog'
import { useState } from 'react'
import useShare from '@/hooks/useShare'
import { useChatConfig } from '../../../context/chatConfig'

const ChatProfileAction = () => {
  const [deleteMessageDialogOpen, setDeleteMessageDialogOpen] = useState(false)
  const { shareFacebook, shareTwitter } = useShare()
  const { aiId } = useChatConfig()

  const handleDeleteMessage = () => {
    setDeleteMessageDialogOpen(true)
  }

  const handleShareFacebook = () => {
    shareFacebook({
      text: 'Come to Crushlevel for chat, Crush, and AI - chat.',
      shareUrl: `${process.env.NEXT_PUBLIC_APP_URL}/@${aiId}`,
    })
  }
  const handleShareTwitter = () => {
    shareTwitter({
      text: 'Come to Crushlevel for chat, Crush, and AI - chat.',
      shareUrl: `${process.env.NEXT_PUBLIC_APP_URL}/@${aiId}`,
    })
  }

  return (
    <div className="absolute top-6 right-6">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <IconButton iconfont="icon-More" variant="ghost" size="small" />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem onClick={handleShareFacebook}>
            <i className="iconfont icon-social-facebook text-txt-primary-normal !text-[16px]" />
            <span>Share to Facebook</span>
          </DropdownMenuItem>
          <DropdownMenuItem onClick={handleShareTwitter}>
            <i className="iconfont icon-social-twitter text-txt-primary-normal !text-[16px]" />
            <span>Share to X</span>
          </DropdownMenuItem>
          <div className="my-3 px-2">
            <Separator className="bg-outline-normal" />
          </div>
          <DropdownMenuItem onClick={handleDeleteMessage}>
            <i className="iconfont icon-trashcan text-txt-primary-normal !text-[16px]" />
            <span>Delete</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <DeleteMessageDialog
        open={deleteMessageDialogOpen}
        onOpenChange={setDeleteMessageDialogOpen}
      />
    </div>
  )
}

export default ChatProfileAction
