// src/MyCharts.js
import React from 'react';
import { Line } from 'react-chartjs-2';
import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ArcElement } from 'chart.js';
import '../style/MemberActivity.css';
import {
  Box,
  List,
  ListItem,
  ListItemText,
  Typography,
  Divider,
} from "@mui/material";
import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";

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

const MyCharts = () => {
  const percentage = 45;
  // Level Chart (Line Chart) Data
  const levelData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Level Progress',
        data: [20, 40, 60, 80, 100, 90, 70],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
    ],
  };

  // Circle Chart (Doughnut Chart) Data
  const circleData = {
    labels: ['Completed', 'Remaining'],
    datasets: [
      {
        label: 'Completion',
        data: [75, 25],
        backgroundColor: ['rgb(75, 192, 192)', 'rgb(192, 75, 75)'],
        borderColor: 'rgb(255, 255, 255)',
        borderWidth: 1,
      },
    ],
  };

  // Performance Chart (Bar Chart) Data
  // const performanceData = {
  //   labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  //   datasets: [
  //     {
  //       label: 'Performance',
  //       data: [50, 70, 90, 60],
  //       backgroundColor: 'rgb(75, 192, 192)',
  //       borderColor: 'rgb(0, 123, 255)',
  //       borderWidth: 1,
  //     },
  //   ],
  // };

  // Chart Options
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
    },
  };

  return (
    <div className="charts-container">
      <div className="chart-item">
        <Box boxShadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
          <h3>Level Chart</h3>
          <Line data={levelData} options={options} />
        </Box>
      </div>
      <div className="chart-item">
        <Box boxShadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
          <h3>Circle Chart</h3>
          <Doughnut data={circleData} options={options} />
        </Box>
      </div>
      <div className="chart-item">
        <h3>Performance Chart</h3>
        {/* <Bar data={performanceData} options={options} /> */}
        <Box
          display="flex"
          flexDirection="row"
          width={300}
          border="1px solid #ddd"
          borderRadius={4}
          overflow="hidden"
          boxShadow="0px 2px 5px rgba(0, 0, 0, 0.1)"
        >
          {/* Sidebar Menu */}
          <Box
            width="40%"
            bgcolor="#f9f9f9"
            display="flex"
            flexDirection="column"
            borderRight="1px solid #ddd"
            py={2}
          >
            <List disablePadding>
              {[
                "Settings",
                "Subscription",
                "Auto Renewal",
                "Achievements",
                "Logout",
              ].map((text, index) => (
                <React.Fragment key={index}>
                  <ListItem button>
                    <ListItemText primary={text} />
                  </ListItem>
                  {index === 3 && <Divider />} {/* Divider after "Achievements" */}
                </React.Fragment>
              ))}
            </List>
          </Box>

          {/* Active User Section */}
          <Box
            width="60%"
            display="flex"
            flexDirection="column"
            alignItems="center"
            justifyContent="center"
            p={2}
          >
            <Typography variant="subtitle1" fontWeight="bold">
              Active User
            </Typography>
            <Box width={80} mt={1}>
              <CircularProgressbar
                value={percentage}
                text={`${percentage}%`}
                styles={buildStyles({
                  textSize: "14px",
                  pathColor: "#4caf50",
                  textColor: "#4caf50",
                  trailColor: "#ddd",
                  pathTransitionDuration: 0.5,
                })}
              />
            </Box>
            <Typography variant="body2" mt={1}>
              {`${percentage}%`}
            </Typography>
          </Box>
        </Box>
      </div>
    </div>
  );
};

export default MyCharts;