import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
import { Box, Heading, useColorMode } from '@chakra-ui/react';
import ChartsTabs from '../ChartsTabs';
import dayjs from 'dayjs'; // Import for date handling

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

const LineChart = () => {
  const { colorMode } = useColorMode();
  const [selectedValue, setSelectedValue] = useState('Daily');
  const [labels, setLabels] = useState([]);
  const [dataset, setDataset] = useState([]);

  useEffect(() => {
    if (selectedValue === 'Daily') {
      // Create hourly labels for 24 hours
      const hours = Array.from({ length: 24 }, (_, index) => `${index}:00`);
      setLabels(hours);
      // Generate random data for each hour
      const dailyData = Array.from({ length: 24 }, () => Math.floor(Math.random() * 5000 + 1000));
      setDataset(dailyData);
    } else if (selectedValue === 'Monthly') {
      // Create labels for the current month (days)
      const daysInMonth = dayjs().daysInMonth();
      const days = Array.from({ length: daysInMonth }, (_, index) => `Day ${index + 1}`);
      setLabels(days);
      // Generate random data for each day
      const monthlyData = Array.from({ length: daysInMonth }, () => Math.floor(Math.random() * 5000 + 1000));
      setDataset(monthlyData);
    } else if (selectedValue === 'Yearly') {
      // Labels for months (already set up)
      setLabels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
      // Generate random data for each month
      const yearlyData = Array.from({ length: 12 }, () => Math.floor(Math.random() * 5000 + 1000));
      setDataset(yearlyData);
    }
  }, [selectedValue]);

  const data = {
    labels: labels,
    datasets: [
      {
        label: 'Transaction Data',
        data: dataset,
        borderColor: '#978FED',
        tension: 0.3,
        pointRadius: 4,
        pointBackgroundColor: colorMode === "light" ? "#fff" : '#232127',
        pointBorderColor: '#978FED',
        pointHoverRadius: 5,
        pointHoverBackgroundColor: '#978FED',
        borderWidth: 2,
        pointBorder: 0,
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          beforeLabel: function (tooltipItem) {
            return `Transactions: $${tooltipItem.raw}`;
          },
          label: function (tooltipItem) {
            return `Price: $${tooltipItem.raw}`;
          },
          afterLabel: function (tooltipItem) {
            return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
          },
        },
        backgroundColor: '#fff',
        titleColor: '#4B4B4B',
        bodyColor: '#4B4B4B',
        displayColors: false,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: function (value) {
            return value / 1000 + 'k';
          },
        },
      },
    },
  };

  return (
    <>
      <Box
        display={"flex"}
        justifyContent={"space-between"}
        alignItems={"center"}
        mb={4}
      >
        <Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
        <ChartsTabs setSelectedValue={setSelectedValue} selectedValue={selectedValue} />
      </Box>
      <Line data={data} options={options} />
    </>
  );
};

export default LineChart;
