Dialog

import { Button, ButtonText, showDialog, type OverlayTrigger } from "@terratcg/ui";
import { useEffect, useRef, type RefObject } from "react";
import type { ViewInstance } from "react-native";

function confirmRedraw(trigger: RefObject<OverlayTrigger | null>) {
  void showDialog({
    tone: "confirm",
    title: "Redraw this quest?",
    body: "You get a new quest for today. This one's progress is lost.",
    cancel: "Not now",
    confirm: "Redraw",
    trigger,
  });
}

export default function DialogConfirm({ capture }: SceneProps) {
  const trigger = useRef<ViewInstance>(null);
  useEffect(() => {
    if (capture) confirmRedraw(trigger);
  }, [capture]);
  return (
    <Button ref={trigger} variant="secondary" onPress={() => confirmRedraw(trigger)}>
      <ButtonText>Redraw quest</ButtonText>
    </Button>
  );
}

import Delete02Icon from "@hugeicons-pro/core-bulk-rounded/Delete02Icon";
import { HugeiconsIcon } from "@hugeicons/react-native";
import { Button, ButtonIcon, ButtonText, showDialog, type ButtonIconProps, type OverlayTrigger } from "@terratcg/ui";
import { useEffect, useRef, type RefObject } from "react";
import type { ViewInstance } from "react-native";

const deleteIcon: ButtonIconProps["children"] = ({ color, size }) => <HugeiconsIcon icon={Delete02Icon} color={color} size={size} />;

/** Your request: the Dialog stays open, its key loading, until it settles. */
const deletePhoto = () => new Promise<void>((resolve) => setTimeout(resolve, 900));

function confirmDelete(trigger: RefObject<OverlayTrigger | null>) {
  void showDialog({
    tone: "destructive",
    title: "Delete Red fox?",
    body: "The photo leaves your library for good. Shared copies stay with your friends.",
    cancel: "Keep it",
    confirm: "Delete",
    icon: deleteIcon,
    onConfirm: deletePhoto,
    trigger,
  });
}

export default function DialogDestructive({ capture }: SceneProps) {
  const trigger = useRef<ViewInstance>(null);
  useEffect(() => {
    if (capture) confirmDelete(trigger);
  }, [capture]);
  return (
    <Button ref={trigger} variant="destructive" onPress={() => confirmDelete(trigger)}>
      <ButtonIcon>{deleteIcon}</ButtonIcon>
      <ButtonText>Delete photo</ButtonText>
    </Button>
  );
}

import { Button, ButtonText, showDialog, type OverlayTrigger } from "@terratcg/ui";
import { useEffect, useRef, type RefObject } from "react";
import type { ViewInstance } from "react-native";

function explainTrades(trigger: RefObject<OverlayTrigger | null>) {
  void showDialog({
    tone: "info",
    title: "Trades are final",
    body: "Once both players accept, the cards change hands and the trade can't be undone.",
    confirm: "Got it",
    trigger,
  });
}

export default function DialogInfo({ capture }: SceneProps) {
  const trigger = useRef<ViewInstance>(null);
  useEffect(() => {
    if (capture) explainTrades(trigger);
  }, [capture]);
  return (
    <Button ref={trigger} variant="outline" onPress={() => explainTrades(trigger)}>
      <ButtonText>How trades work</ButtonText>
    </Button>
  );
}