import React from "react";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import {
  SpotlightContentProps,
  SpotlightMask,
} from "../../types/spotlight.types";
import { styles } from "./styles";
import { SCREEN } from "../../constants";

const getContentPosition = (
  mask: SpotlightMask | null,
  contentPosition: string
) => {
  const margin = 20;
  const defaultPosition = {
    top: 100,
    left: 20,
    right: 20,
  };

  if (!mask || typeof mask.y !== "number" || isNaN(mask.y)) {
    return defaultPosition;
  }

  const contentHeight = 150; // Estimated content height

  switch (contentPosition) {
    case "top": {
      if (mask.y < contentHeight + margin) {
        return {
          top: mask.y + mask.height + margin,
          left: 20,
          right: 20,
        };
      }
      return {
        top: Math.max(20, mask.y - contentHeight - margin),
        left: 20,
        right: 20,
      };
    }
    case "bottom": {
      if (mask.y + mask.height + contentHeight + margin > SCREEN.HEIGHT) {
        return {
          top: Math.max(20, mask.y - contentHeight - margin),
          left: 20,
          right: 20,
        };
      }
      return {
        top: mask.y + mask.height + margin,
        left: 20,
        right: 20,
      };
    }
    case "left": {
      if (mask.x < 300 + margin) {
        return {
          top: mask.y + (mask.height - contentHeight) / 2,
          left: mask.x + mask.width + margin,
          maxWidth: SCREEN.WIDTH - (mask.x + mask.width + margin * 2),
        };
      }
      return {
        top: mask.y + (mask.height - contentHeight) / 2,
        right: SCREEN.WIDTH - mask.x + margin,
        maxWidth: mask.x - margin * 2,
      };
    }
    case "right": {
      if (mask.x + mask.width + 300 + margin > SCREEN.WIDTH) {
        return {
          top: mask.y + (mask.height - contentHeight) / 2,
          right: SCREEN.WIDTH - mask.x + margin,
          maxWidth: mask.x - margin * 2,
        };
      }
      return {
        top: mask.y + (mask.height - contentHeight) / 2,
        left: mask.x + mask.width + margin,
        maxWidth: SCREEN.WIDTH - (mask.x + mask.width + margin * 2),
      };
    }
    default:
      return defaultPosition;
  }
};

export const SpotlightContent: React.FC<SpotlightContentProps> = ({
  content,
  contentPosition,
  contentContainerStyle,
  contentTextStyle,
  buttonContainerStyle,
  buttonStyle,
  buttonTextStyle,
  prevButtonText,
  nextButtonText,
  finishButtonText,
  onNext,
  onPrev,
  onFinish,
  mask,
  fadeAnim,
}) => {
  const contentPositionStyle = getContentPosition(mask, contentPosition);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <View
        style={[
          styles.contentContainer,
          contentPositionStyle,
          contentContainerStyle,
        ]}
      >
        <Text style={[styles.contentText, contentTextStyle]}>{content}</Text>
        <View style={[styles.buttonContainer, buttonContainerStyle]}>
          {onPrev && (
            <TouchableOpacity
              style={[styles.button, buttonStyle]}
              onPress={onPrev}
            >
              <Text style={[styles.buttonText, buttonTextStyle]}>
                {prevButtonText || "Previous"}
              </Text>
            </TouchableOpacity>
          )}
          <TouchableOpacity
            style={[styles.button, buttonStyle]}
            onPress={onNext || onFinish}
          >
            <Text style={[styles.buttonText, buttonTextStyle]}>
              {nextButtonText ||
                (onNext ? "Next" : finishButtonText || "Finish")}
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </Animated.View>
  );
};