import React, { useState, useRef, useEffect } from "react";
import {
  View,
  StyleSheet,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  Dimensions,
  Modal,
  Animated,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";

const MainMenu = ({
  visible,
  onClose,
}: {
  visible: boolean;
  onClose: () => void;
}) => {
  const [internalVisible, setInternalVisible] = useState(visible);
  const slideAnim = useRef(new Animated.Value(-winWidth * 0.85)).current;

  useEffect(() => {
    if (visible) {
      setInternalVisible(true);
      Animated.timing(slideAnim, {
        toValue: 0,
        duration: 250,
        useNativeDriver: false,
      }).start();
    } else {
      Animated.timing(slideAnim, {
        toValue: -winWidth * 0.85,
        duration: 250,
        useNativeDriver: false,
      }).start(() => {
        setInternalVisible(false); // Tắt Modal sau animation
      });
    }
  }, [visible]);

  if (!internalVisible) return null;

  return (
    <Modal visible={internalVisible} transparent animationType="none">
      <TouchableOpacity
        style={styles.overlay}
        onPress={onClose}
        activeOpacity={1}
      />
      <Animated.View style={[styles.menuFixed, { left: slideAnim }]}>
        <View style={styles.headerMenu}>
          <Text style={styles.headerMenuText}>Menu</Text>
          <TouchableOpacity onPress={onClose}>
            <Ionicons name="close-outline" size={20} style={styles.closeMenu} />
          </TouchableOpacity>
        </View>
        <View>
          <TouchableOpacity style={styles.itemMenu}>
            <View style={styles.textLeft}>
              <Image
                source={require("../../../assets/images/icon_buildpc.png")}
                style={styles.iconFix}
                resizeMode="contain"
              />
              <Text style={styles.itemText}>Build PC</Text>
            </View>
            <Ionicons name="chevron-forward-outline" size={20} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.itemMenu}>
            <View style={styles.textLeft}>
              <Image
                source={require("../../../assets/images/icon_store.png")}
                style={styles.iconFix}
                resizeMode="contain"
              />
              <Text style={styles.itemText}>Tìm người bán</Text>
            </View>
            <Ionicons name="chevron-forward-outline" size={20} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.itemMenu}>
            <View style={styles.textLeft}>
              <Image
                source={require("../../../assets/images/icon_location.png")}
                style={styles.iconFix}
                resizeMode="contain"
              />
              <Text style={styles.itemText}>Địa chỉ sửa chữa</Text>
            </View>
            <Ionicons name="chevron-forward-outline" size={20} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.itemMenu}>
            <View style={styles.textLeft}>
              <Image
                source={require("../../../assets/images/icon_question.png")}
                style={styles.iconFix}
                resizeMode="contain"
              />
              <Text style={styles.itemText}>Hỏi đáp</Text>
            </View>
            <Ionicons name="chevron-forward-outline" size={20} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.itemMenu}>
            <View style={styles.textLeft}>
              <Image
                source={require("../../../assets/images/icon_box.png")}
                style={styles.iconFix}
                resizeMode="contain"
              />
              <Text style={styles.itemText}>Sản phẩm đã lưu</Text>
            </View>
            <Ionicons name="chevron-forward-outline" size={20} />
          </TouchableOpacity>
          <TouchableOpacity style={styles.itemMenu}>
            <View style={styles.textLeft}>
              <Image
                source={require("../../../assets/images/icon_article.png")}
                style={styles.iconFix}
                resizeMode="contain"
              />
              <Text style={styles.itemText}>Tin rao vặt</Text>
            </View>
            <Ionicons name="chevron-forward-outline" size={20} />
          </TouchableOpacity>
        </View>
      </Animated.View>
    </Modal>
  );
};

export { MainMenu };

let winWidth = Dimensions.get("window").width; //full width
let winHeight = Dimensions.get("window").height; //full height

const styles = StyleSheet.create({
  headerMenu: {
    alignItems: "center",
    justifyContent: "space-between",
    flexDirection: "row",
    padding: 10,
    backgroundColor: "#462F91",
  },
  menuFixed: {
    width: "85%",
    height: "100%",
    backgroundColor: "#fff",
    zIndex: 999,
  },
  headerMenuText: {
    color: "#fff",
    fontWeight: "bold",
  },
  closeMenu: {
    backgroundColor: "#fff",
    width: 20,
    height: 20,
    color: "#000",
    borderRadius: 50,
  },
  iconFix: {
    width: 25,
    resizeMode: "contain",
  },
  itemMenu: {
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    gap: 10,
    marginBottom: 10,
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#e1e1e1",
    height: 50,
  },
  itemText: {
    fontSize: 15,
    color: "#000",
    fontWeight: "bold",
  },
  textLeft: {
    alignItems: "center",
    gap: 10,
    flexDirection: "row",
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)", // Lớp nền bán trong suốt
    zIndex: 98, // Đảm bảo lớp overlay nằm dưới menu
  },
});
