import MapView, {
  Polyline,
  Marker,
  LatLng,
  Region,
  PROVIDER_GOOGLE,
  PROVIDER_DEFAULT,
} from "react-native-maps";
import { Dimensions, View, Pressable, Platform } from "react-native";
import { iceGreen } from "../../constants/Colors";
import { Fontisto } from "@expo/vector-icons";
import { GeoJSONLineString, GeoJSONMultiPoint } from "./map-types";
import { toLatLng } from "./map-utils";
import { getBounds } from "geolib";
import { useEffect } from "react";
interface EdgeMarkerProps {
  coordinate: LatLng;
  color: string;
}

const EdgeMarker = ({ coordinate, color }: EdgeMarkerProps) => {
  if (!coordinate) {
    return null;
  }

  return (
    <Marker coordinate={coordinate}>
      <View
        style={{
          width: 8,
          height: 8,
          borderRadius: 6,
          backgroundColor: color,
        }}
      />
    </Marker>
  );
};

interface Props {
  path: GeoJSONLineString | LatLng[];
  secondPath?: GeoJSONLineString | LatLng[] | null;
  flags?: GeoJSONMultiPoint | LatLng[] | null;
  capturedFlags?: GeoJSONMultiPoint | LatLng[] | null;
  initialRegion?: Region;
  mapRef?: React.RefObject<MapView> | null;
  size?: "large" | "small" | "fullscreen";
  preview?: boolean;
  onPressFlag?: (point: LatLng, found: boolean) => void;
}

export const MiniMap = ({
  mapRef,
  path,
  secondPath,
  size = "large",
  preview,
  flags,
  capturedFlags,
  onPressFlag,
  initialRegion,
}: Props) => {
  const _path = !Array.isArray(path) ? toLatLng(path) : path;
  const _secondPath =
    secondPath && !Array.isArray(secondPath) ? toLatLng(secondPath) : secondPath;
  const _flags = flags && !Array.isArray(flags) ? toLatLng(flags) : flags;
  const _capturedFlags =
    capturedFlags && !Array.isArray(capturedFlags)
      ? toLatLng(capturedFlags)
      : capturedFlags;

  const flagFound = (flag: LatLng) =>
    !!_capturedFlags?.find(
      (f) => f.latitude === flag.latitude && flag.longitude === f.longitude
    );

  const bounds = _path?.length ? getBounds(_path) : null;

  return (
    <View
      style={
        size === "large"
          ? {
              width: Dimensions.get("screen").width,
            }
          : size === "fullscreen"
          ? {
              width: Dimensions.get("screen").width,
              height: Dimensions.get("screen").height,
            }
          : { width: 100, height: 80 }
      }
    >
      <MapView
        provider={
          Platform.OS === "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT
        }
        ref={mapRef}
        mapType="satellite"
        userInterfaceStyle="light"
        style={
          size === "large"
            ? {
                width: Dimensions.get("screen").width,
                height: Dimensions.get("screen").width,
              }
            : size === "fullscreen"
            ? {
                width: Dimensions.get("screen").width,
                height: Dimensions.get("screen").height,
              }
            : { width: 100, height: 80 }
        }
        liteMode={preview}
        cacheEnabled={preview}
        showsUserLocation={!preview}
        showsMyLocationButton={false}
        initialRegion={
          _path.length
            ? {
                latitude: _path[Math.floor(_path.length / 2)].latitude,
                longitude: _path[Math.floor(_path.length / 2)].longitude,
                latitudeDelta: bounds ? bounds.maxLat - bounds.minLat : 0.0015,
                longitudeDelta: bounds
                  ? bounds.maxLng - bounds.minLng
                  : 0.00015,
              }
            : initialRegion
        }
      >
        {_path?.length ? (
          <Polyline coordinates={_path} strokeColor="#4484fc" strokeWidth={4} />
        ) : null}
        <EdgeMarker color="#4484fc" coordinate={_path[0]} />
        <EdgeMarker color="#4484fc" coordinate={_path[_path.length - 1]} />
        {_secondPath ? (
          <>
            {_secondPath?.length ? (
              <Polyline
                coordinates={_secondPath}
                strokeColor="#fc55b4"
                strokeWidth={4}
              />
            ) : null}
            <EdgeMarker color="#fc55b4" coordinate={_secondPath[0]} />
            <EdgeMarker
              color="#fc55b4"
              coordinate={_secondPath[_secondPath.length - 1]}
            />
          </>
        ) : null}

        {_flags?.map((flag, i) => (
          <Marker
            key={i}
            coordinate={flag}
            anchor={{ x: 0.5, y: 0.5 }}
            style={{ zIndex: 2 }}
            onPress={() => {
              onPressFlag?.(flag, flagFound(flag));
            }}
          >
            <View
              style={{
                height: 60,
                width: 60,
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <View
                style={{
                  width: 25,
                  height: 25,
                  backgroundColor: flagFound(flag) ? iceGreen : "white",
                  shadowColor: "green",
                  shadowOpacity: 0.8,
                  shadowRadius: 15,
                  shadowOffset: { width: 0, height: 3 },
                  borderRadius: 14,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <Fontisto
                  name={flagFound(flag) ? "check" : "flag"}
                  size={12}
                  color={flagFound(flag) ? "white" : iceGreen}
                />
              </View>
            </View>
          </Marker>
        ))}
      </MapView>
    </View>
  );
};