"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { buttonVariants } from "@/components/ui/button";
import FilePickerButton from "@/components/ui/file-picker-button";
import { Progress } from "@/components/ui/progress";
import { toast } from "@/components/ui/use-toast";
import {
  ParsedBookmark,
  parseHoarderBookmarkFile,
  parseNetscapeBookmarkFile,
  parseOmnivoreBookmarkFile,
  parsePocketBookmarkFile,
} from "@/lib/importBookmarkParser";
import { cn } from "@/lib/utils";
import { useMutation } from "@tanstack/react-query";
import { TRPCClientError } from "@trpc/client";
import { Download, Upload } from "lucide-react";

import {
  useCreateBookmarkWithPostHook,
  useUpdateBookmark,
  useUpdateBookmarkTags,
} from "@hoarder/shared-react/hooks/bookmarks";
import {
  useAddBookmarkToList,
  useCreateBookmarkList,
} from "@hoarder/shared-react/hooks/lists";
import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";

export function ExportButton() {
  return (
    <Link
      href="/api/bookmarks/export"
      className={cn(
        buttonVariants({ variant: "default" }),
        "flex items-center gap-2",
      )}
    >
      <Download />
      <p>Export Links and Notes</p>
    </Link>
  );
}

export function ImportExportRow() {
  const router = useRouter();

  return (
    <div>TBD!</div>
  );
}

export default function ImportExport() {
  return (
    <div className="flex w-full flex-col gap-2">
      <p className="mb-4 text-lg font-medium">Import / Export Bookmarks</p>
      <ImportExportRow />
    </div>
  );
}