import React from "react";
import {
  View,
  Text,
  StyleSheet,
  ViewStyle,
  TextStyle,
  TouchableOpacity,
  TouchableOpacityProps,
  StyleProp,
} from "react-native";

import { Ionicons } from "@expo/vector-icons";

interface LockOverlayProps extends TouchableOpacityProps {
  visible?: boolean;
  containerStyle?: StyleProp<ViewStyle>;
  contentContainerStyle?: StyleProp<ViewStyle>;
  iconStyle?: StyleProp<TextStyle>;
  textStyle?: StyleProp<TextStyle>;
  text?: string | null;
  icon?: React.ReactNode;
  overlayOpacity?: number;
  contentPosition?: "center" | "top-center" | "top-left" | "top-right";
  contentPadding?: number;
  /**
   * If true, adds a white layer to desaturate the background, creating a grayscale effect.
   * @default false
   */
  grayscale?: boolean;
}

const LockOverlay: React.FC<LockOverlayProps> = ({
  visible = true,
  containerStyle,
  contentContainerStyle,
  iconStyle,
  textStyle,
  text = "Unlock",
  icon,
  overlayOpacity = 0.7,
  contentPosition = "center",
  contentPadding = 20,
  grayscale = false,
  ...touchableProps
}) => {
  if (!visible) return null;

  const contentPositionStyle: StyleProp<ViewStyle> = {};
  switch (contentPosition) {
    case "top-center":
      contentPositionStyle.justifyContent = "flex-start";
      contentPositionStyle.alignItems = "center";
      contentPositionStyle.paddingTop = contentPadding;
      break;
    case "top-left":
      contentPositionStyle.justifyContent = "flex-start";
      contentPositionStyle.alignItems = "flex-start";
      contentPositionStyle.paddingTop = contentPadding;
      contentPositionStyle.paddingLeft = contentPadding;
      break;
    case "top-right":
      contentPositionStyle.justifyContent = "flex-start";
      contentPositionStyle.alignItems = "flex-end";
      contentPositionStyle.paddingTop = contentPadding;
      contentPositionStyle.paddingRight = contentPadding;
      break;
    case "center":
    default:
      contentPositionStyle.justifyContent = "center";
      contentPositionStyle.alignItems = "center";
      break;
  }

  return (
    <TouchableOpacity
      style={[styles.wrapper, containerStyle]}
      activeOpacity={0.8}
      {...touchableProps}
    >
      {/* This layer desaturates the background image */}
      {grayscale && <View style={styles.grayscaleLayer} />}

      {/* This is the original dark tint layer */}
      <View
        style={[
          styles.darkTintLayer,
          { backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
        ]}
      />

      {/* This layer holds the actual content (icon and text) */}
      <View style={[styles.contentContainer, contentPositionStyle]}>
        <View style={[styles.content, contentContainerStyle]}>
          {icon || (
            <Ionicons
              name={"lock-closed"}
              size={30}
              color={"white"}
              style={iconStyle}
            />
          )}

          {text && text.trim() !== "" && (
            <Text style={[styles.textBase, textStyle]}>{text}</Text>
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    ...StyleSheet.absoluteFill,
    zIndex: 999,
  },
  grayscaleLayer: {
    ...StyleSheet.absoluteFill,
    backgroundColor: "white",
    opacity: 0.4, // Adjust this value to control the grayscale intensity
  },
  darkTintLayer: {
    ...StyleSheet.absoluteFill,
  },
  contentContainer: {
    ...StyleSheet.absoluteFill,
  },
  content: {
    alignItems: "center",
  },
  textBase: {
    fontSize: 18,
    fontWeight: "bold",
    marginTop: 10,
    textAlign: "center",
    color: "white", // Default text color to white for better visibility
  },
});

export default LockOverlay;