import { Ionicons } from "@expo/vector-icons";
import { ReactNode, useRef } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import Swipeable, {
  type SwipeableMethods,
} from "react-native-gesture-handler/ReanimatedSwipeable";

import { fonts, radii, spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";
import type { ThemeColors } from "@/lib/theme-palette";
import { useThemedStyles } from "@/lib/use-themed-styles";

export type SwipeAction = {
  key: string;
  label: string;
  icon: keyof typeof Ionicons.glyphMap;
  color: string;
  backgroundColor: string;
  onPress: () => void;
};

type SwipeableRowProps = {
  children: ReactNode;
  actions: SwipeAction[];
  enabled?: boolean;
  backgroundColor?: string;
};

export function SwipeableRow({
  children,
  actions,
  enabled = true,
  backgroundColor,
}: SwipeableRowProps) {
  const { colors } = useAppTheme();
  const styles = useThemedStyles(createSwipeableRowStyles);
  const rowBackground = backgroundColor ?? colors.background;
  const swipeRef = useRef<SwipeableMethods>(null);

  function renderRightActions() {
    return (
      <View style={styles.actions}>
        {actions.map((action) => (
          <Pressable
            key={action.key}
            style={[styles.actionButton, { backgroundColor: action.backgroundColor }]}
            onPress={() => {
              swipeRef.current?.close();
              action.onPress();
            }}
          >
            <Ionicons name={action.icon} size={20} color={action.color} />
            <Text style={[styles.actionLabel, { color: action.color }]}>{action.label}</Text>
          </Pressable>
        ))}
      </View>
    );
  }

  if (!enabled || actions.length === 0) {
    return <View style={[styles.row, { backgroundColor: rowBackground }]}>{children}</View>;
  }

  return (
    <Swipeable ref={swipeRef} renderRightActions={renderRightActions} overshootRight={false}>
      <View style={[styles.row, { backgroundColor: rowBackground }]}>{children}</View>
    </Swipeable>
  );
}

const createSwipeableRowStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    row: {
      backgroundColor: colors.background,
      borderRadius: radii.lg,
      overflow: "hidden",
      marginBottom: spacing.xs,
    },
    actions: {
      flexDirection: "row",
      alignItems: "stretch",
    },
    actionButton: {
      width: 80,
      alignItems: "center",
      justifyContent: "center",
      gap: spacing.xs,
      borderRadius: radii.md,
      marginLeft: spacing.xs,
    },
    actionLabel: {
      fontFamily: fonts.bodyMedium,
      fontSize: 11,
    },
  });