import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Linking,
  Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import Collapsible from "react-native-collapsible";
import { NavigationProp } from "@react-navigation/native";

var winWidth = Dimensions.get("window").width; //full width

const accordionData = [
  {
    title: "Về chúng tôi",
    links: [
      { title: "Độc quyền", route: "" },
      { title: "Mua online", route: "" },
      { title: "Bộ sưu tập", route: "" },
      { title: "Tin tức", route: "article" },
    ],
  },
  {
    title: "Tuyển dụng",
    links: [
      { title: "Liên hệ", route: "contact" },
      { title: "Điều khoản", route: "" },
      { title: "Chính sách bảo mật", route: "" },
      { title: "Trở thành đối tác", route: "" },
    ],
  },
  {
    title: "Liên kết",
    links: [{ title: "Hurasoft.com", route: "https://www.hurasoft.vn" }],
  },
  {
    title: "Giới thiệu",
    content: "Chào mừng bạn đến với ứng dụng của chúng tôi.",
  },
];

type Props = {
  navigation: NavigationProp<any>;
  activeTab?: string;
};

const Footer: React.FC<Props> = ({ navigation, activeTab = "homepage" }) => {
  const [activeIndex, setActiveIndex] = useState(null);

  const toggleAccordion = (index: any) => {
    setActiveIndex(index === activeIndex ? null : index);
  };

  const handleLinkPress = (route: string) => {
    if (route.startsWith("http")) {
      // Mở link ngoài nếu là URL
      Linking.openURL(route);
    } else {
      navigation?.navigate(route);
    }
  };

  return (
    <View style={styles.footer}>
      <View style={styles.spacer} />
      <ScrollView style={styles.accordionContainer}>
        {accordionData.map((item, index) => (
          <View key={index}>
            <TouchableOpacity
              style={styles.accordionHeader}
              onPress={() => toggleAccordion(index)}
            >
              <Text style={styles.accordionTitle}>{item.title}</Text>
              <Ionicons
                name={activeIndex === index ? "chevron-up" : "chevron-down"}
                size={20}
                color="#333"
              />
            </TouchableOpacity>
            <Collapsible collapsed={activeIndex !== index}>
              {item.links?.map((link, linkIndex) => (
                <TouchableOpacity
                  key={linkIndex}
                  style={styles.linkItem}
                  onPress={() => handleLinkPress(link.route)}
                >
                  <Text style={styles.linkText}>{link.title}</Text>
                </TouchableOpacity>
              ))}
            </Collapsible>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  footer: {
    width: "100%",
    marginTop: 20,
  },
  spacer: {
    display: "flex",
    minHeight: 10,
    width: "100%",
    backgroundColor: "#1c039b",
  },
  accordionContainer: {
    paddingLeft: 10,
    paddingTop: 16,
    marginBottom: 60,
    width: winWidth - 10,
  },
  accordionHeader: {
    backgroundColor: "#f5f5f5",
    padding: 14,
    borderRadius: 8,
    marginBottom: 8,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  accordionTitle: {
    fontSize: 16,
    color: "#333",
    fontWeight: 700,
  },
  accordionContent: {
    backgroundColor: "#fff",
    padding: 12,
    marginBottom: 10,
    color: "#555",
  },
  linkItem: {
    paddingVertical: 8,
    paddingLeft: 20,
  },
  linkText: {
    fontSize: 14,
    fontWeight: 500,
  },
});

export default Footer;