import React from "react";
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

const ActivityChart = ({ data, groupBy }) => {
  // Format period labels based on groupBy
  const formatPeriod = (period) => {
    if (!period) return "";

    if (groupBy === "month") {
      const [year, month] = period.split("-");
      const date = new Date(year, parseInt(month) - 1);
      return date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
    } else if (groupBy === "week") {
      return new Date(period).toLocaleDateString("en-US", { month: "short", day: "numeric" });
    } else {
      return new Date(period).toLocaleDateString("en-US", { month: "short", day: "numeric" });
    }
  };

  const chartData = data.map((item) => ({
    period: formatPeriod(item.period),
    Tasks: item.tasks,
    Posts: item.posts,
    Events: item.events,
    "Streets Adopted": item.streetsAdopted,
  }));

  return (
    <div>
      <div className="mb-4">
        <h6>Activity Trends</h6>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="period" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="Tasks" stroke="#0d6efd" strokeWidth={2} />
            <Line type="monotone" dataKey="Posts" stroke="#198754" strokeWidth={2} />
            <Line type="monotone" dataKey="Events" stroke="#ffc107" strokeWidth={2} />
            <Line
              type="monotone"
              dataKey="Streets Adopted"
              stroke="#dc3545"
              strokeWidth={2}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>

      <div>
        <h6>Activity Comparison</h6>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="period" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="Tasks" fill="#0d6efd" />
            <Bar dataKey="Posts" fill="#198754" />
            <Bar dataKey="Events" fill="#ffc107" />
            <Bar dataKey="Streets Adopted" fill="#dc3545" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default ActivityChart;
