// App.js

import React, { useState } from 'react';
import './App.css';
import ExpenseForm from './components/ExpenseForm';
import ExpenseList from './components/ExpenseList';
import ChartComponent from './components/ChartComponent';

function App() {
const [expenses, setExpenses] = useState([]);

const addExpense = (newExpense) => {
    setExpenses([...expenses, newExpense]);
};

return (
    <div className="App">
    <h1>Personal Finance Manager</h1>
    <ExpenseForm addExpense={addExpense} />
    <ExpenseList expenses={expenses} />
    <ChartComponent expenses={expenses} />
    </div>
);
}

export default App;

// ExpenseForm.js
import React, { useState } from 'react';

function ExpenseForm({ addExpense }) {
const [expenseName, setExpenseName] = useState('');
const [expenseAmount, setExpenseAmount] = useState('');

const handleNameChange = (event) => {
    setExpenseName(event.target.value);
};

const handleAmountChange = (event) => {
    setExpenseAmount(event.target.value);
};

const handleSubmit = (event) => {
    event.preventDefault();
    if (!expenseName || !expenseAmount) return;
    addExpense({ name: expenseName, amount: parseFloat(expenseAmount) });
    setExpenseName('');
    setExpenseAmount('');
};

return (
    <div>
    <h2>Add Expense</h2>
    <form onSubmit={handleSubmit}>
        <label>
        Expense Name:
        <input
            type="text"
            value={expenseName}
            onChange={handleNameChange}
        />
        </label>
        <label>
        Amount:
        <input
            type="number"
            value={expenseAmount}
            onChange={handleAmountChange}
        />
        </label>
        <button type="submit">Add Expense</button>
    </form>
    </div>
);
}

export default ExpenseForm;

// ExpenseList.js

import React from 'react';

function ExpenseList({ expenses }) {
return (
    <div>
    <h2>Expense List</h2>
    <ul>
        {expenses && expenses.map((expense, index) =>
         ( // Check if expenses is defined before mapping
        <li key={index}>
            {expense.name} - ${expense.amount}
        </li>
        ))}
    </ul>
    </div>
);
}

export default ExpenseList;

// ChartComponent.js

import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto'; 
// Make sure to import Chart from chart.js/auto

function ChartComponent({ expenses }) {
const chartRef = useRef(null);
let myChart = null; // Declare chart instance

useEffect(() => {
    const ctx = chartRef.current.getContext('2d');

    // Destroy existing chart if it exists
    if (myChart) {
    myChart.destroy();
    }

    // Create new chart
    myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
        label: 'Expenses',
        data: expenses.map(expense => expense.amount), 
// Assuming expenses is an array of objects with amount property
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
        }]
    },
    options: {
        scales: {
        y: {
            beginAtZero: true
        }
        }
    }
    });

    // Clean up: Destroy chart when component unmounts
    return () => {
    myChart.destroy();
    };
}, [expenses]);

return (
    <div>
    <canvas ref={chartRef} />
    </div>
);
}

export default ChartComponent;