import { useState, useEffect } from 'react';
import topicService  from '../services/topicService';
import { MEDIA_URL } from '../../../../utils/Constant';
import { useSlugContext } from '../../../../utils/SlugContext';

const useTopics = (sectionId) => {
    const [topics, setTopics] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [sections, setSection] = useState(null);
    const thumbPath = `${MEDIA_URL}/uploads/section/`;
    const { sectionSlugMap } = useSlugContext();
    
    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            try {
                const data = await topicService.fetchTopicsBySectionId(sectionSlugMap[sectionId]);
                if (Array.isArray(data.payload)) {
                    setTopics(data.payload);
                } else {
                    setTopics([]);
                }
            } catch (error) {
                setError(error);
            } finally {
                try {
                    const sectionData = await topicService.fetchSectionById(sectionSlugMap[sectionId]);
                    setSection(sectionData.payload);
                } catch (err) {
                    setError('Failed to fetch section');
                } finally {
                    setLoading(false);
                }
            }
        };

        // const fetchSection = async () => {
        //     setLoading(true);
        //     try {
        //       const sectionData = await topicService.fetchSectionById(sectionId);
        //       setSection(sectionData.payload);
        //     } catch (err) {
        //       setError('Failed to fetch section');
        //     } finally {
        //       setLoading(false);
        //     }
        // };

        fetchData();
        // fetchSection();
    }, [sectionId]);

  return { topics, sections, loading, error, thumbPath};
};

export default useTopics;