import React from "react";
import { Switch } from "../ui/switch";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

function PublishArticleAlertDialog({
  published,
  setPublished,
}: {
  published: boolean;
  setPublished: (published: boolean) => void;
}) {
  const [open, setOpen] = React.useState(false);
  const [checked, setChecked] = React.useState(Boolean(published));
  return (
    <>
      <Switch
        checked={checked}
        onCheckedChange={(value) => {
          setChecked(value);
          setOpen(true);
        }}
      />
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogTrigger className="flex items-center" />
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Bist du dir sicher?</AlertDialogTitle>
            <AlertDialogDescription>
              Möchtest du diesen Artikel{" "}
              {published ? "unveröffentlichen" : "veröffentlichen"}?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setChecked((prev) => !prev)}>
              Abbrechen
            </AlertDialogCancel>
            <AlertDialogAction onClick={() => setPublished(checked)}>
              Ja {published ? "Unveröffentlichen" : "Veröffentlichen"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>

    // <div>
    // </div>
  );
}

export default PublishArticleAlertDialog;
