import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

class StatCharts extends StatelessWidget {
  const StatCharts({Key? key}) : super(key: key);

  Widget buildLineChart(BuildContext context) {
    return LineChart(
        LineChartData(
          backgroundColor: Colors.grey.shade800,
          titlesData: FlTitlesData(
            leftTitles: SideTitles(
              showTitles: true,
              reservedSize: 22,
              interval: 10,
              getTextStyles: (value) => const TextStyle(color: Colors.white60),
            ),
            bottomTitles: SideTitles(
              showTitles: true,
              reservedSize: 22,
              getTextStyles: (value) => const TextStyle(color: Colors.white60),
              getTitles: (double value) {
                switch (value.toInt()) { // Map int values to months
                  case 1:
                    return 'January';
                  case 2:
                    return 'February';
                  case 3:
                    return 'March';
                  case 4:
                    return 'April';
                  default:
                    return '';
                }
              },
            ),
          ),
          borderData: FlBorderData(
            show: true,
            border: Border.all(color: Colors.white, width: 1), // Set border properties
          ),
          minX: 0,
          maxX: 4,
          minY: 0,
          maxY: 50,
          lineBarsData: [
            LineChartBarData(
              spots: [
                FlSpot(0, 34),
                FlSpot(1, 22),
                FlSpot(2, 30),
                FlSpot(3, 15),
                FlSpot(4, 5),
              ],
              isCurved: true,
              colors: [Colors.blue.shade200],
            ),
          ],
        ),
      );
  }

  Widget buildBarChart(BuildContext context) {
    return BarChart(
      BarChartData(
        alignment: BarChartAlignment.spaceAround,
        maxY: 20,
        barTouchData: BarTouchData(enabled: false),
        backgroundColor: Colors.grey.shade800,
        titlesData: FlTitlesData(
          bottomTitles: SideTitles(
            showTitles: true,
            getTextStyles: (value) => const TextStyle(color: Colors.white60),
            margin: 10,
            getTitles: (value) {
              switch (value.toInt()) {
                case 0:
                  return 'Placeholder1';
                case 1:
                  return 'Placeholder2';
                case 2:
                  return 'Placeholder3';
                default:
                  return '';
              }
            },
          ),
          leftTitles: SideTitles(
            showTitles: true,
            getTextStyles: (value) => const TextStyle(color: Colors.white60),
            margin: 10,
            reservedSize: 30,
            interval: 5,
          ),
        ),
        borderData: FlBorderData(
          show: true,
          border: Border.all(color: Colors.white60, width: 1),
        ),
        barGroups: [
          BarChartGroupData(
            x: 0,
            barRods: [
              BarChartRodData(y: 15, width: 10),
            ],
          ),
          BarChartGroupData(
            x: 1,
            barRods: [
              BarChartRodData(y: 10, width: 10),
            ],
          ),
          BarChartGroupData(
            x: 2,
            barRods: [
              BarChartRodData(y: 18, width: 10),
            ],
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.8, // Set the width of the LineChart
          height: 200,
          child: buildLineChart(context),
        ),
        const SizedBox(height: 20),
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.8,
          height: 160,
          child: buildBarChart(context),
        ),
      ],
    );
  }
}