Untitled

import { CommonActions } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useSelector } from 'react-redux';
import conversationalAiApi from '../../../../api/conversationalAi';
import { Chat, LessonMaterial } from '../../../../assets/svgs';
import useAnalytics from '../../../../hooks/useAnalytics';
import useApi from '../../../../hooks/useApi';
import { useLocalization } from '../../../../hooks/useLocalization';
import routes from '../../../../navigation/routes';
import { TermIdSelector } from '../../../../redux/TermRedux';
import { userSelector } from '../../../../redux/UserRedux';
import { colors } from '../../../../theme/Colors';
import Fonts from '../../../../theme/Fonts';
import { units } from '../../../../theme/Units';
import ActivityIndicator from '../../../components/ActivityIndicator';
import AppButton from '../../../components/Button';
import TopMenu from '../../../components/TopMenu';

const SessionAndLessionCorrections = ({ route, navigation }) => {
    const { bookUnitId, aiUseCaseId, currentDate, aiUseCaseTitle } = route.params;

    const strings = useLocalization();
    const user = useSelector(userSelector);
    const analytics = useAnalytics();
    const selectedTerm = useSelector(TermIdSelector);
    const memberId = user?.MemberId;

    const getSessionAndLessonCorrectionsApi = useApi(conversationalAiApi.getSessionAndLessonCorrections);
    const loading = getSessionAndLessonCorrectionsApi.loading;

    const [sessionAndLessonCorrectionData, setSessionAndLessonCorrectionData] = useState({});
    const [selectedType, setSelectedType] = useState(null);

    const getSessionAndLessonCorrections = async () => {
        const model = {
            memberId: memberId,
            bookUnitId: bookUnitId,
            aiUseCaseId: aiUseCaseId,
            termId: selectedTerm?.termId,
            lessonDate: currentDate
        }
        const result = await getSessionAndLessonCorrectionsApi.request(model);

        if (result.data?.status === 200) {
            const resultContent = JSON.parse(result.data?.content);
            setSessionAndLessonCorrectionData(resultContent);
            // Eğer session correction varsa başlangıçta onu seç
            if (resultContent?.sessionCorrections?.length > 0) {
                setSelectedType('session');
            } else if (resultContent?.lessonCorrections?.length > 0) {
                setSelectedType('lesson');
            }
        } else {
            const resultContent = result?.data?.content;
            resultContent
                ? analytics.useAnalytics('Error_Occured', { error: `${resultContent}` })
                : analytics.useAnalytics('Error_Occured', { error: 'Unexpected Error Occured!' });
        }
    }

    useEffect(() => {
        bookUnitId && aiUseCaseId && currentDate && memberId && selectedTerm && getSessionAndLessonCorrections();
    }, [bookUnitId, aiUseCaseId, currentDate, memberId, selectedTerm]);

    return (
        <SafeAreaView style={styles.body}>
            <TopMenu
                onPressBack={() => {
                    navigation.dispatch(CommonActions.goBack());
                }}
                title={aiUseCaseTitle}
                onPressMenu={() => {
                    navigation.toggleDrawer();
                }}
            />
            <ActivityIndicator visible={loading} />
            <ScrollView style={styles.scrollViewContainer} contentContainerStyle={styles.scrollViewContent}>

                {sessionAndLessonCorrectionData?.sessionCorrections?.length > 0 && (
                    <TouchableOpacity
                        onPress={() => setSelectedType('session')}
                        style={[
                            styles.greyContainer,
                            selectedType === 'session' && styles.selectedContainer
                        ]}
                    >
                        <View style={styles.titleContainer}>
                            <View style={styles.titleContent}>
                                <Chat width={28} height={28} style={styles.titleIcon} />
                                <Text style={styles.title}>{strings.speaking_lesson.conversational_ai.session_correction.replace('#USECASE#', aiUseCaseTitle)}</Text>
                            </View>
                        </View>
                        {sessionAndLessonCorrectionData?.sessionCorrections?.slice(0, 3).map((item, index) => (
                            <View key={index} style={styles.innerContainer}>
                                <View style={styles.greenDot} />
                                <Text style={[styles.normalText, { paddingLeft: units.width / 50 }]}>{item}</Text>
                            </View>
                        ))}
                    </TouchableOpacity>
                )}
                
                {sessionAndLessonCorrectionData?.lessonCorrections?.length > 0 && (
                    <TouchableOpacity
                        onPress={() => setSelectedType('lesson')}
                        style={[
                            styles.greyContainer,
                            selectedType === 'lesson' && styles.selectedContainer
                        ]}
                    >
                        <View style={styles.titleContainer}>
                            <View style={styles.titleContent}>
                                <LessonMaterial width={28} height={28} style={styles.titleIcon} />
                                <Text style={styles.title}>{strings.speaking_lesson.conversational_ai.lesson_correction}</Text>
                            </View>
                        </View>
                        {sessionAndLessonCorrectionData?.lessonCorrections?.slice(0, 3).map((item, index) => (
                            <View key={index} style={styles.innerContainer}>
                                <View style={styles.greenDot} />
                                <Text style={[styles.normalText, { paddingLeft: units.width / 50 }]}>{item}</Text>
                            </View>
                        ))}
                    </TouchableOpacity>
                )}
            </ScrollView>

            {selectedType && (
                <View style={styles.buttonContainer}>
                    <AppButton
                        title={strings.speaking_lesson.conversational_ai.correct_and_speak}
                        onPress={() => {
                            navigation.navigate(routes.SPEAKING_LESSON.CHATBOT_HOME, {
                                aiUseCaseType: 'correction',
                                date: currentDate,
                                // Eğer session correctionlar için chat ekranına gidiyorsak
                                // correctinları doğrudan bu ekrandan gönderip chat ekranında servise gitmiyoruz.
                                ...(selectedType === 'session' && { corrections: sessionAndLessonCorrectionData?.sessionCorrections })
                            });
                        }}
                    />
                </View>
            )}
        </SafeAreaView>
    );
}

export default SessionAndLessionCorrections;

const styles = StyleSheet.create({
    body: {
        flex: 1,
        backgroundColor: colors.WHITE,
    },
    scrollViewContainer: {
        flex: 1,
        marginHorizontal: units.width / 36,
    },
    scrollViewContent: {
        paddingTop: units.height / 30,
        paddingBottom: units.height / 20,
    },
    greyContainer: {
        backgroundColor: colors.WHITE,
        borderRadius: units.width / 30,
        marginBottom: units.height / 50,
        marginHorizontal: units.width / 50,
        borderWidth: 2,
        borderColor: colors.LT_GREY,
        overflow: 'hidden',
    },
    selectedContainer: {
        borderColor: colors.BLUE,
        borderWidth: 2,
        backgroundColor: colors.WHITE,
    },
    titleContainer: {
        backgroundColor: colors.LT_GREY,
        paddingHorizontal: units.width / 25,
        paddingVertical: units.width / 36,
        marginBottom: units.height / 100,
        borderBottomWidth: 1,
        borderBottomColor: colors.LT_GREY,
    },
    titleContent: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    titleIcon: {
        marginRight: units.width / 50,
    },
    title: {
        fontSize: Fonts.size(14),
        fontFamily: Fonts.type.bold,
        color: colors.BLACK,
        flex: 1,
    },
    innerContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: units.height / 100,
        paddingHorizontal: units.width / 25,
    },
    greenDot: {
        width: 8,
        height: 8,
        backgroundColor: colors.GREEN,
        borderRadius: 4,
    },
    normalText: {
        color: colors.BLACK,
        fontFamily: Fonts.type.regular,
        fontSize: Fonts.size(14),
        flex: 1,
    },
    buttonContainer: {
        padding: units.width / 20,
        backgroundColor: colors.WHITE,
    }
});