import 'dart:async';
import 'dart:math';

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:hoshan/ui/theme/colors.dart';

class CustomeLineChartPlaceholder extends StatefulWidget {
  const CustomeLineChartPlaceholder({super.key});

  @override
  State<CustomeLineChartPlaceholder> createState() => _LineChartSample2State();
}

class _LineChartSample2State extends State<CustomeLineChartPlaceholder> {
  List<Color> gradientColors = [
    AppColors.secondryColor.defaultShade,
    AppColors.primaryColor.defaultShade,
  ];

  final limitCount = 100;
  final sinPoints = <FlSpot>[];
  final cosPoints = <FlSpot>[];

  double xValue = 0;
  double step = 0.08;

  Timer? timer;

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(const Duration(milliseconds: 40), (timer) {
      while (sinPoints.length > limitCount) {
        sinPoints.removeAt(0);
        cosPoints.removeAt(0);
      }
      setState(() {
        sinPoints.add(FlSpot(xValue, sin(xValue)));
        cosPoints.add(FlSpot(xValue, -sin(xValue)));
      });
      xValue += step;
    });
  }

  LineChartBarData sinLine(List<FlSpot> points) {
    return LineChartBarData(
      spots: points,
      dotData: const FlDotData(
        show: false,
      ),
      gradient: LinearGradient(
        colors: gradientColors,
        stops: const [0.1, 1.0],
      ),
      isStrokeCapRound: true,
      belowBarData: BarAreaData(
        show: true,
        gradient: LinearGradient(
          colors: gradientColors.map((color) => color.withAlpha(30)).toList(),
        ),
      ),
      barWidth: 4,
      isCurved: true,
    );
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1,
      child: LineChart(
        mainData(),
      ),
    );
  }

  LineChartData mainData() {
    return LineChartData(
      minY: -4,
      maxY: 4,
      minX: sinPoints.first.x,
      maxX: sinPoints.last.x,
      lineTouchData: const LineTouchData(enabled: false),
      clipData: const FlClipData.all(),
      lineBarsData: [
        sinLine(sinPoints),
        sinLine(cosPoints),
      ],
      gridData: FlGridData(
        show: true,
        drawVerticalLine: true,
        horizontalInterval: 1,
        verticalInterval: 1,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: AppColors.gray.defaultShade,
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: AppColors.gray.defaultShade,
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        rightTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        topTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        bottomTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: false,
            reservedSize: 30,
            interval: 1,
            getTitlesWidget: (value, meta) => Text(value.toString()),
          ),
        ),
        leftTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: false,
            interval: 1,
            getTitlesWidget: (value, meta) => Text(value.toString()),
            reservedSize: 50,
          ),
        ),
      ),
      borderData: FlBorderData(
        show: true,
        border: Border.all(color: const Color(0xff37434d)),
      ),
    );
  }
}