import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { IconButton } from '@/components/ui/button'
import { useAIUser } from '../context/aiUser'
import { IAlbumItem } from '@/services/user/types'
import AlbumDeleteAlert from '@/components/features/album-delete-alert'

const AlbumItemAction = ({ data }: { data: IAlbumItem }) => {
  const { isOwner, userId } = useAIUser()

  if (!isOwner) {
    return null
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <IconButton
          variant="tertiaryDark"
          size="xs"
          className="relative opacity-0 transition-opacity duration-200 group-hover:opacity-100 data-[state=open]:opacity-100"
        >
          <i className="iconfont icon-More !text-[16px] leading-none" />
        </IconButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <AlbumDeleteAlert aiId={userId!} albumId={data.albumId} isDefaultImage={!!data.isDefault}>
          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
            <i className="iconfont icon-trashcan !text-[16px] leading-none" />
            <span>Delete</span>
          </DropdownMenuItem>
        </AlbumDeleteAlert>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default AlbumItemAction
