import { faAngleDown, faCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Animated,
  Easing,
  StyleSheet,
} from "react-native";

const Accordion = ({ sections, selected,sel }) => {
  const [activeSection, setActiveSection] = useState(-1);
  const [animatedHeights] = useState(sections.map(() => new Animated.Value(0)));

  const toggleSection = (sectionIndex) => {
    const animations = animatedHeights.map((height, index) => {
      if (index === sectionIndex) {
        const contentHeight = sections[sectionIndex].methods.length * 60; // Adjust the height as needed
        return Animated.timing(height, {
          toValue: activeSection === sectionIndex ? 0 : contentHeight,
          duration: 300,
          easing: Easing.ease,
          useNativeDriver: false,
        });
      } else if (index === activeSection) {
        return Animated.timing(height, {
          toValue: 0,
          duration: 300,
          easing: Easing.ease,
          useNativeDriver: false,
        });
      }
      return null;
    });

    Animated.parallel(animations).start();
    setActiveSection(activeSection === sectionIndex ? -1 : sectionIndex);
  };

  return (
    <View style={styles.container}>
      {sections.map((section, index) => (
        <View key={index} style={styles.section}>
          {/* <TouchableOpacity
            style={styles.acc}
            onPress={() => {
              toggleSection(index);
            }}
          > */}
            {/* <Text style={styles.sectionTitle}>{section.type}</Text>
            <FontAwesomeIcon icon={faAngleDown} color={"#ffaa00"} size={16} />
          </TouchableOpacity>
          <Animated.View
            style={[
              styles.sectionContent,
              {
                height: animatedHeights[index],
              },
            ]}
          > */}
            {/* {section?.methods.map((section, index) => ( */}
              <TouchableOpacity
                style={styles.btnMethod}
                key={index}
                onPress={() => {
                  selected(section.methodName);
                }}
              >
                <Text style={styles.btnMethodText}>{section.methodName}</Text>
                {sel === section?.methodName ? (
              <FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} />
            ) : null}
              </TouchableOpacity>
            {/* ))} */}
          {/* </Animated.View> */}
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    height: "100%",
    width: "100%",
    // justifyContent:'center',
    alignItems: "center",
  },
  section: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#ececec",
    padding: 10,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold",
  },
  sectionContent: {
    overflow: "hidden",
    paddingHorizontal: 15,
    height: 200,
  },
  acc: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
  },
  btnMethod: {
    padding: 10,
    // borderWidth: 1,
    // borderColor: "#e9e7e7",
    borderRadius: 5,
    marginVertical: 1,
    flexDirection:'row',
    justifyContent : 'space-between',
    alignItems: 'center'
  },
  btnMethodText: {
    fontSize: 20,
  },
});

export default Accordion;