// import React, { useState, useEffect } from 'react';
// import { Line } from 'react-chartjs-2'; // Assuming you're using react-chartjs-2 for the chart rendering
// import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

// // 

// const LineChartComponent = () => {
//   const [lineChartData, setLineChartData] = useState([
//     { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
//     { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
//     { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' },
//   ]);

//   const [lineChartLabels] = useState(['January', 'February', 'March', 'April', 'May', 'June', 'July']);
//   const [lineChartOptions] = useState({
//     responsive: true,
//   });

//   const [lineChartColors] = useState([
//     {
//       backgroundColor: 'rgba(148,159,177,0.2)',
//       borderColor: 'rgba(148,159,177,1)',
//       pointBackgroundColor: 'rgba(148,159,177,1)',
//       pointBorderColor: '#fff',
//       pointHoverBackgroundColor: '#fff',
//       pointHoverBorderColor: 'rgba(148,159,177,0.8)',
//     },
//     {
//       backgroundColor: 'rgba(77,83,96,0.2)',
//       borderColor: 'rgba(77,83,96,1)',
//       pointBackgroundColor: 'rgba(77,83,96,1)',
//       pointBorderColor: '#fff',
//       pointHoverBackgroundColor: '#fff',
//       pointHoverBorderColor: 'rgba(77,83,96,1)',
//     },
//     {
//       backgroundColor: 'rgba(148,159,177,0.2)',
//       borderColor: 'rgba(148,159,177,1)',
//       pointBackgroundColor: 'rgba(148,159,177,1)',
//       pointBorderColor: '#fff',
//       pointHoverBackgroundColor: '#fff',
//       pointHoverBorderColor: 'rgba(148,159,177,0.8)',
//     },
//   ]);

//   const [lineChartLegend] = useState(true);
//   const [lineChartType] = useState('line');

//   // Function to randomize chart data
//   const randomize = () => {
//     const _lineChartData = lineChartData.map((series) => ({
//       ...series,
//       data: series.data.map(() => Math.floor(Math.random() * 100) + 1),
//     }));
//     setLineChartData(_lineChartData);
//   };

//   // Chart hover and click events
//   const chartClicked = (e) => {
//     console.log(e);
//   };

//   const chartHovered = (e) => {
//     console.log(e);
//   };

//   return (
//     <div style={{ display: 'block' }}>
//       <Line
//         data={{
//           labels: lineChartLabels,
//           datasets: lineChartData,
//         }}
//         options={lineChartOptions}
//         legend={lineChartLegend}
//         type={lineChartType}
//         onHover={chartHovered}
//         onClick={chartClicked}
//       />
//       {/* You can add a button here to call randomize() */}
//       <button onClick={randomize}>Randomize Data</button>
//     </div>
//   );
// };

// export default LineChartComponent;

import React, { useState } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import { Box, Button } from '@mui/material';

// Register Chart.js components
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const LineChartComponent = ({ 
  chartTitle = 'Line Chart',
  showLegend = true,
  showLabel = true,
  xAxis = 'Category',
  yAxis = 'Value',
  width = '100%',
  height = '100%'
}) => {
  const [lineChartData, setLineChartData] = useState({
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Series A',
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 2,
        pointBackgroundColor: 'rgba(75, 192, 192, 1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(75, 192, 192, 1)',
        tension: 0.1
      },
      {
        label: 'Series B',
        data: [28, 48, 40, 19, 86, 27, 90],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 2,
        pointBackgroundColor: 'rgba(54, 162, 235, 1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
        tension: 0.1
      },
      {
        label: 'Series C',
        data: [18, 48, 77, 9, 100, 27, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 2,
        pointBackgroundColor: 'rgba(255, 99, 132, 1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(255, 99, 132, 1)',
        tension: 0.1
      },
    ]
  });

  // Options for the chart
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: showLegend,
      },
      title: {
        display: true,
        text: chartTitle,
      },
      tooltip: {
        enabled: true,
      }
    },
    scales: {
      x: {
        title: {
          display: showLabel,
          text: xAxis
        }
      },
      y: {
        title: {
          display: showLabel,
          text: yAxis
        }
      }
    }
  };

  // Function to randomize chart data
  const randomize = () => {
    setLineChartData(prevData => ({
      ...prevData,
      datasets: prevData.datasets.map(dataset => ({
        ...dataset,
        data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 100) + 1)
      }))
    }));
  };

  return (
    <Box sx={{ 
      width, 
      height, 
      display: 'flex', 
      flexDirection: 'column',
      position: 'relative'
    }}>
      <Box sx={{ flex: 1, minHeight: 0 }}>
        <Line data={lineChartData} options={options} />
      </Box>
      <Box sx={{ 
        display: 'flex', 
        justifyContent: 'center', 
        pt: 1 
      }}>
        <Button 
          variant="outlined" 
          size="small" 
          onClick={randomize}
          sx={{ fontSize: '0.75rem' }}
        >
          Randomize Data
        </Button>
      </Box>
    </Box>
  );
};

export default LineChartComponent;
