import React, { useState } from 'react';
import { Box, Button } from '@mui/material';
import { Line } from 'react-chartjs-2';
import { registerChartJS, commonChartOptions } from './chartutils';

registerChartJS();

const LineChartComponent = ({ 
  chartTitle = 'Line Chart',
  showLegend = true,
  showLabel = true,
  xAxis = 'Category',
  yAxis = 'Value'
}) => {
  const [data, setData] = useState({
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Series A',
        data: [65, 59, 80, 81, 56, 55, 40],
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        tension: 0.1
      },
      {
        label: 'Series B',
        data: [28, 48, 40, 19, 86, 27, 90],
        borderColor: 'rgba(54, 162, 235, 1)',
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        tension: 0.1
      },
    ]
  });

  const options = {
    ...commonChartOptions,
    plugins: {
      legend: { display: showLegend },
      title: { display: true, text: chartTitle },
    },
    scales: {
      x: { title: { display: showLabel, text: xAxis } },
      y: { title: { display: showLabel, text: yAxis } }
    }
  };

  const randomize = () => {
    setData(prev => ({
      ...prev,
      datasets: prev.datasets.map(dataset => ({
        ...dataset,
        data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 100) + 1)
      }))
    }));
  };

  return (
    <Box sx={{ height: 400 }}>
      <Line data={data} options={options} />
      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
        <Button variant="outlined" onClick={randomize}>
          Randomize Data
        </Button>
      </Box>
    </Box>
  );
};

export default LineChartComponent;