import React, { useCallback } from 'react';
import { View, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useFocusEffect } from '@react-navigation/native';
import AppText from '@/components/AppText';
import Title from '@/components/Title';
import fichier_4a from '@/assets/json/fichier_4a.json';
import fichier_8a from '@/assets/json/fichier_8a.json';
import { useUsers } from '@/contexts/UserContext';
import { useId4a } from '@/contexts/Id4aContext';
import { useId3a } from '@/contexts/Id3aContext';
import { useAppData } from '@/contexts/AppDataContext';


export default function EvalComponent() {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const router = useRouter();
  const { id_4a } = useLocalSearchParams();

  const { setId4a } = useId4a();
  const { setId3a } = useId3a();

  useFocusEffect(
    useCallback(() => {
      if (id_4a) {
        const id = Number(id_4a);
        setId4a(id);
        setId3a(undefined);
      }
    }, [id_4a])
  );

  const id = Number(id_4a);
  const page = fichier_4a.find(item => item.id === id);

  if (!page) {
    return <AppText text="Erreur : page introuvable." />;
  }

  const ids = page.id_4a?.split(',').map(Number) || [];

  const children = ids
    .map(childId => fichier_4a.find(item => item.id === childId))
    .filter(Boolean);

  const { updateCurrentUserAsync } = useUsers();

  const handleClick = async (child) => {
    const targetConstructor = fichier_8a.find(el => el.id === child.id_8a);
    if (!targetConstructor) return;

    await updateCurrentUserAsync({ evaluateur: child.label });

    router.push({
      pathname: targetConstructor.href,
      params: { id_4a: child.id }
    });
  };

  return (
    <View style={styles.container}>

      <ScrollView style={styles.scrollContainer}>
        <View style={styles.innerContainer}>
          {children.map(child => (
            <TouchableOpacity
              key={child.id}
              onPress={() => handleClick(child)}
              style={styles.listItem}
            >
              <AppText text={child.label} />
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 2,
  },
  scrollContainer: {
    width: '80%',
  },
  innerContainer: {
    alignSelf: 'center',
    width: '85%',
  },
  listItem: {
    justifyContent: 'center',
    alignItems: 'left',
    paddingVertical: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});