import AppText from '@/components/AppText';
import Button from '@/components/Button';
import RemarquePopup from '@/components/popUp/RemarquePopUp';
import i18n from '@/i18n/config';
import colors from '@/styles/colors';
import { useRoute } from '@react-navigation/native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import fichier_4a from '@/assets/json/fichier_4a.json';
import { useAppData } from '@/contexts/AppDataContext';


const PartagerScreen: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const router = useRouter();
  const [modalVisible, setModalVisible] = useState(false);
  const { key } = useLocalSearchParams();
  const targetItem = fichier_4a.find((item) => item.id === key);

  const ids = targetItem?.id_4a?.split(',') || [];

  const buttons = ids
    .map((id) => fichier_4a.find((el) => el.id === id))
    .filter((el) => el !== undefined);

  return (
    <View style={styles.container}>
     {buttons.map((el) => (
        <Button
          paramKey={el!.id}
          text={el!.label}
          href={el!.href}
          style={styles.button}
        />
      ))}
      <RemarquePopup isVisible={modalVisible} onClose={()=>{setModalVisible(false)}} />
    </View>
  );
};

export default PartagerScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
    // backgroundColor: colors.white, // Optional: Add padding for better spacing
  },
  button: {
    minWidth: '90%',
    marginVertical: 10, // Optional: Add margin between buttons
  },
});