import { convertToDMS, kmhToKnot } from "@/utils/geom";
import { MaterialIcons } from "@expo/vector-icons";
import { useEffect, useRef, useState } from "react";
import { Animated, TouchableOpacity, View } from "react-native";
import { Description } from "./Description";

type GPSInfoPanelProps = {
  gpsData: Model.GPSResonse | undefined;
};

const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
  const [isExpanded, setIsExpanded] = useState(true);
  const [panelHeight, setPanelHeight] = useState(0);
  const translateY = useRef(new Animated.Value(0)).current;
  const blockBottom = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(translateY, {
      toValue: isExpanded ? 0 : 200, // Dịch chuyển xuống 200px khi thu gọn
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [isExpanded]);

  useEffect(() => {
    const targetBottom = isExpanded ? panelHeight + 12 : 10;
    Animated.timing(blockBottom, {
      toValue: targetBottom,
      duration: 500,
      useNativeDriver: false,
    }).start();
  }, [isExpanded, panelHeight, blockBottom]);

  const togglePanel = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <>
      {/* Khối hình vuông */}
      <Animated.View
        style={{
          position: "absolute",
          bottom: blockBottom,
          left: 5,
          width: 48,
          height: 48,
          backgroundColor: "blue",
          borderRadius: 4,
          zIndex: 30,
        }}
      />

      <Animated.View
        style={{
          transform: [{ translateY }],
        }}
        className="absolute bottom-0 gap-3 right-0 p-3 left-0 h-auto w-full rounded-t-xl bg-white shadow-md"
        onLayout={(event) => setPanelHeight(event.nativeEvent.layout.height)}
      >
        {/* Nút toggle ở top-right */}
        <TouchableOpacity
          onPress={togglePanel}
          className="absolute top-2 right-2 z-10 bg-white rounded-full p-1"
        >
          <MaterialIcons
            name={isExpanded ? "close" : "close"}
            size={20}
            color="#666"
          />
        </TouchableOpacity>

        <View className="flex-row justify-between">
          <View className="flex-1">
            <Description
              title="Kinh độ"
              description={convertToDMS(gpsData?.lat ?? 0, true)}
            />
          </View>
          <View className="flex-1">
            <Description
              title="Vĩ độ"
              description={convertToDMS(gpsData?.lon ?? 0, false)}
            />
          </View>
        </View>
        <View className="flex-row justify-between">
          <View className="flex-1">
            <Description
              title="Tốc độ"
              description={`${kmhToKnot(gpsData?.s ?? 0).toString()} knot`}
            />
          </View>
          <View className="flex-1">
            <Description title="Hướng" description={`${gpsData?.h ?? 0}°`} />
          </View>
        </View>
      </Animated.View>

      {/* Nút floating để mở lại panel khi thu gọn */}
      {!isExpanded && (
        <TouchableOpacity
          onPress={togglePanel}
          className="absolute bottom-5 right-2 z-20 bg-white rounded-full p-2 shadow-lg"
        >
          <MaterialIcons name="info-outline" size={24} />
        </TouchableOpacity>
      )}
    </>
  );
};

export default GPSInfoPanel;