import { Pressable, Text, View } from "react-native";
import { RecurringDeleteMode } from "@calchat/shared";
import { useThemeStore } from "../stores/ThemeStore";
import { ModalBase } from "./ModalBase";

type DeleteEventModalProps = {
  visible: boolean;
  eventTitle: string;
  isRecurring: boolean;
  onConfirm: (mode: RecurringDeleteMode) => void;
  onCancel: () => void;
};

type DeleteOption = {
  mode: RecurringDeleteMode;
  label: string;
};

const RECURRING_DELETE_OPTIONS: DeleteOption[] = [
  {
    mode: "single",
    label: "Nur dieses Vorkommen",
  },
  {
    mode: "future",
    label: "Dieses und zukünftige",
  },
  {
    mode: "all",
    label: "Alle Vorkommen",
  },
];

export const DeleteEventModal = ({
  visible,
  eventTitle,
  isRecurring,
  onConfirm,
  onCancel,
}: DeleteEventModalProps) => {
  const { theme } = useThemeStore();

  const title = isRecurring
    ? "Wiederkehrenden Termin löschen"
    : "Termin loeschen";

  return (
    <ModalBase
      visible={visible}
      onClose={onCancel}
      title={title}
      subtitle={eventTitle}
      footer={{ label: "Abbrechen", onPress: onCancel }}
    >
      {isRecurring ? (
        // Recurring event: show three options
        RECURRING_DELETE_OPTIONS.map((option) => (
          <Pressable
            key={option.mode}
            onPress={() => onConfirm(option.mode)}
            className="py-3 px-4 rounded-lg mb-2"
            style={{
              backgroundColor: theme.secondaryBg,
              borderWidth: 1,
              borderColor: theme.borderPrimary,
            }}
          >
            <Text
              className="font-medium text-base"
              style={{ color: theme.textPrimary }}
            >
              {option.label}
            </Text>
          </Pressable>
        ))
      ) : (
        // Non-recurring event: simple confirmation
        <View>
          <Text className="text-base mb-4" style={{ color: theme.textPrimary }}>
            Moechtest du diesen Termin wirklich loeschen?
          </Text>
          <Pressable
            onPress={() => onConfirm("all")}
            className="py-3 px-4 rounded-lg"
            style={{
              backgroundColor: theme.rejectButton,
            }}
          >
            <Text
              className="font-medium text-base text-center"
              style={{ color: theme.buttonText }}
            >
              Loeschen
            </Text>
          </Pressable>
        </View>
      )}
    </ModalBase>
  );
};