Untitled

import React, { useState, useEffect } from "react";
import { Pie } from "react-chartjs-2";
import { Chart as chartjs, ArcElement, Tooltip, Legend,} from "chart.js";
import { useAuth } from "../../hooks/useAuth";
import axios from "axios";

chartjs.register(ArcElement, Tooltip, Legend);

interface JournalAnalyticsModalProps {
    isOpen: boolean;
    onClose: () => void;
}
  
  const JournalAnalyticsModal: React.FC<JournalAnalyticsModalProps> = ({
    isOpen,
    onClose,
  }) => {
    const { user } = useAuth();
    const [moodData, setMoodData] = useState<Record<string, number>>({});
    const [loading, setLoading] = useState(false);
  
    useEffect(() => {
      if (isOpen && user?.id) {
        fetchMoodData();
      }
    }, [isOpen, user?.id]);
  
    const fetchMoodData = async () => {
      setLoading(true);
      try {
        const response = await axios.get(`/api/journals/user/${user?.id}`, {
          headers: {
            Authorization: `Bearer ${localStorage.getItem("jwt")}`,
          },
        });
  
        // Count moods
        const moodCounts = response.data.journals.reduce(
          (acc: Record<string, number>, journal: { mood: string }) => {
            acc[journal.mood] = (acc[journal.mood] || 0) + 1;
            return acc;
          },
          {}
        );
        setMoodData(moodCounts);
      } catch (error) {
        console.error("Failed to fetch journal data:", error);
      } finally {
        setLoading(false);
      }
    };
  
    const data = {
      labels: Object.keys(moodData),
      datasets: [
        {
          data: Object.values(moodData),
          backgroundColor: ["#FFD700", "#87CEFA", "#D3D3D3", "#FF6347", "#6495ED"],
          hoverBackgroundColor: ["#FFC700", "#76BEEA", "#C3C3C3", "#FF5247", "#5485D5"],
        },
      ],
    };
  
    if (!isOpen) return null;
  
    return (
      <div className="fixed inset-0 bg-gray-800 bg-opacity-50 flex justify-center items-center">
        <div className="bg-white rounded-lg shadow-lg w-4/5 h-4/5 max-w-lg max-h-[90vh] p-6">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-xl font-bold text-[#5E9ED9]">Mood Analytics</h2>
            <button className="text-red-500 font-bold text-xl" onClick={onClose}>
              X
            </button>
          </div>
          {loading ? <p>Loading...</p> : <Pie data={data} />}
        </div>
      </div>
    );
  };
  
  export default JournalAnalyticsModal;