import { getPolygonCenter } from "@/utils/polyline";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Marker, Polygon } from "react-native-maps";

export interface PolygonWithLabelProps {
  coordinates: {
    latitude: number;
    longitude: number;
  }[];
  label?: string;
  content?: string;
  fillColor?: string;
  strokeColor?: string;
  strokeWidth?: number;
  zIndex?: number;
  zoomLevel?: number;
}

/**
 * Component render Polygon kèm Label/Text ở giữa
 */
export const PolygonWithLabel: React.FC<PolygonWithLabelProps> = ({
  coordinates,
  label,
  content,
  fillColor = "rgba(16, 85, 201, 0.6)",
  strokeColor = "rgba(16, 85, 201, 0.8)",
  strokeWidth = 2,
  zIndex = 50,
  zoomLevel = 10,
}) => {
  if (!coordinates || coordinates.length < 3) {
    return null;
  }

  const centerPoint = getPolygonCenter(coordinates);

  // Tính font size dựa trên zoom level
  // Zoom càng thấp (xa ra) thì font size càng nhỏ
  const calculateFontSize = (baseSize: number) => {
    const baseZoom = 10;
    // Giảm scale factor để text không quá to khi zoom out
    const scaleFactor = Math.pow(2, (zoomLevel - baseZoom) * 0.3);
    return Math.max(baseSize * scaleFactor, 5); // Tối thiểu 5px
  };

  const labelFontSize = calculateFontSize(12);
  const contentFontSize = calculateFontSize(10);
  console.log("zoom level: ", zoomLevel);

  const paddingScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.2), 0.5);
  const minWidthScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.25), 0.9);
  console.log("Min Width Scale: ", minWidthScale);

  return (
    <>
      <Polygon
        coordinates={coordinates}
        fillColor={fillColor}
        strokeColor={strokeColor}
        strokeWidth={strokeWidth}
        zIndex={zIndex}
      />
      {label && (
        <Marker
          coordinate={centerPoint}
          zIndex={50}
          tracksViewChanges={false}
          anchor={{ x: 0.5, y: 0.5 }}
        >
          <View style={styles.markerContainer}>
            <View
              style={[
                styles.labelContainer,
                {
                  paddingHorizontal: 5 * paddingScale,
                  paddingVertical: 5 * paddingScale,
                  minWidth: 80,
                  maxWidth: 150 * minWidthScale,
                },
              ]}
            >
              <Text
                style={[styles.labelText, { fontSize: labelFontSize }]}
                numberOfLines={2}
              >
                {label}
              </Text>
              {content && (
                <Text
                  style={[
                    styles.contentText,
                    { fontSize: contentFontSize, marginTop: 2 * paddingScale },
                  ]}
                  numberOfLines={2}
                >
                  {content}
                </Text>
              )}
            </View>
          </View>
        </Marker>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  markerContainer: {
    alignItems: "center",
    justifyContent: "center",
  },
  labelContainer: {
    backgroundColor: "rgba(16, 85, 201, 0.95)",
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 18,
    borderWidth: 2,
    borderColor: "#fff",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.4,
    shadowRadius: 5,
    elevation: 8,
    minWidth: 80,
    maxWidth: 250,
  },
  labelText: {
    color: "#fff",
    fontSize: 14,
    fontWeight: "bold",
    letterSpacing: 0.3,
    textAlign: "center",
  },
  contentText: {
    color: "#fff",
    fontSize: 11,
    fontWeight: "600",
    letterSpacing: 0.2,
    textAlign: "center",
    opacity: 0.95,
  },
});