import 'package:eatvio_app/core/app_export.dart';
import 'package:eatvio_app/features/profile/models/profile_model.dart';
import 'package:eatvio_app/features/profile/presentation/bloc/profile_cubit/profile_cubit.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class CircumferenceChartWidget extends StatefulWidget {
  final List<Circumference> chartData;
  final ProfileCubit profileCubit;

  const CircumferenceChartWidget({
    super.key,
    required this.chartData,
    required this.profileCubit,
  });

  @override
  State<CircumferenceChartWidget> createState() => _CircumferenceChartWidgetState();
}

class _CircumferenceChartWidgetState extends State<CircumferenceChartWidget> {
  late final chestController;
  late final hipController;
  late final waistController;
  late int chest;
  late int hip;
  late int waist;

  @override
  void initState() {
    super.initState();
    chestController = FixedExtentScrollController(initialItem: int.parse(widget.chartData.last.chestCircumference.toString()));
    hipController = FixedExtentScrollController(initialItem: int.parse(widget.chartData.last.hipCircumference.toString()));
    waistController = FixedExtentScrollController(initialItem: int.parse(widget.chartData.last.waistCircumference.toString()));
    chest = widget.chartData.last.chestCircumference;
    hip = widget.chartData.last.hipCircumference;
    waist = widget.chartData.last.waistCircumference;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          scrollDirection: Axis.horizontal,
          physics: const BouncingScrollPhysics(),
          child: Row(
            children: [
              Text(
                '${widget.chartData.last.chestCircumference} см',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 48,
                  fontWeight: FontWeight.w500,
                ),
              ),
              widget.chartData.last.chestCircumference > widget.chartData[widget.chartData.length - 2].chestCircumference
                  ? Icon(
                      Icons.arrow_drop_up,
                      size: 48,
                      color: Colors.grey,
                    )
                  : Icon(
                      Icons.arrow_drop_down,
                      size: 48,
                      color: Colors.grey,
                    ),
              Text(
                '${widget.chartData.last.waistCircumference} см',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 48,
                  fontWeight: FontWeight.w500,
                ),
              ),
              widget.chartData.last.waistCircumference > widget.chartData[widget.chartData.length - 2].waistCircumference
                  ? Icon(
                      Icons.arrow_drop_up,
                      size: 48,
                      color: Colors.grey,
                    )
                  : Icon(
                      Icons.arrow_drop_down,
                      size: 48,
                      color: Colors.grey,
                    ),
              Text(
                '${widget.chartData.last.hipCircumference} см',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 48,
                  fontWeight: FontWeight.w500,
                ),
              ),
              widget.chartData.last.hipCircumference > widget.chartData[widget.chartData.length - 2].hipCircumference
                  ? Icon(
                      Icons.arrow_drop_up,
                      size: 48,
                      color: Colors.grey,
                    )
                  : Icon(
                      Icons.arrow_drop_down,
                      size: 48,
                      color: Colors.grey,
                    ),
            ],
          ),
        ),
        Stack(
          alignment: Alignment.bottomRight,
          children: [
            SfCartesianChart(
              margin: EdgeInsets.symmetric(horizontal: 8),
              enableAxisAnimation: true,
              plotAreaBorderWidth: 0,
              trackballBehavior: TrackballBehavior(
                enable: true,
                activationMode: ActivationMode.singleTap,
                tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
                tooltipSettings: InteractiveTooltip(),
                lineType: TrackballLineType.vertical,
              ),
              primaryXAxis: DateTimeCategoryAxis(
                tickPosition: TickPosition.inside,
                majorTickLines: MajorTickLines(
                  size: 0,
                ),
                edgeLabelPlacement: EdgeLabelPlacement.shift,
                dateFormat: DateFormat.MMMd('ru'),
                labelStyle: TextStyle(
                  color: Colors.grey,
                ),
                majorGridLines: MajorGridLines(dashArray: [1], color: Colors.grey.withOpacity(0.3)),
                axisLine: AxisLine(
                  color: Colors.grey.withOpacity(0.3),
                  width: 0.4,
                ),
              ),
              primaryYAxis: NumericAxis(
                isVisible: false,
                labelFormat: '{value} см',
                axisLine: AxisLine(
                  width: 1,
                ),
                majorTickLines: MajorTickLines(size: 0),
              ),
              series: _getSplineSeries(),
              tooltipBehavior: TooltipBehavior(enable: true),
            ),
            FloatingActionButton.small(
              heroTag: 'addWeight',
              onPressed: () {
                showModalBottomSheet(
                  useRootNavigator: true,
                  context: context,
                  builder: (context) {
                    return Column(
                      children: [
                        Expanded(
                          child: Row(
                            children: [
                              Expanded(
                                child: CupertinoPicker(
                                  magnification: 1.22,
                                  squeeze: 1.2,
                                  useMagnifier: true,
                                  scrollController: chestController,
                                  itemExtent: 24,
                                  onSelectedItemChanged: (int value) {
                                    chest = value;
                                  },
                                  children: [
                                    for (int i = 0; i < 301; i++) Text('$i'),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: CupertinoPicker(
                                  magnification: 1.22,
                                  squeeze: 1.2,
                                  useMagnifier: true,
                                  scrollController: hipController,
                                  itemExtent: 24,
                                  onSelectedItemChanged: (int value) {
                                    hip = value;
                                  },
                                  children: [
                                    for (int i = 0; i < 301; i++) Text('$i'),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: CupertinoPicker(
                                  magnification: 1.22,
                                  squeeze: 1.2,
                                  useMagnifier: true,
                                  scrollController: waistController,
                                  itemExtent: 24,
                                  onSelectedItemChanged: (int value) {
                                    waist = value;
                                  },
                                  children: [
                                    for (int i = 0; i < 301; i++) Text('$i'),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            widget.profileCubit.addCircumference(
                              chestCircumference: chest,
                              waistCircumference: waist,
                              hipCircumference: hip,
                            );
                            Navigator.of(context).pop();
                          },
                          borderRadius: BorderRadius.circular(16),
                          child: Ink(
                            width: MediaQuery.of(context).size.width - 32,
                            padding: EdgeInsets.all(16),
                            decoration: BoxDecoration(
                              color: appTheme.blueA400,
                              borderRadius: BorderRadius.circular(16),
                            ),
                            child: Center(
                              child: Text(
                                'Сохранить',
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                );
              },
              backgroundColor: Colors.red,
              shape: CircleBorder(),
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ],
    );
  }

  List<CartesianSeries<Circumference, DateTime>> _getSplineSeries() {
    final Color seriesColor1 = Colors.red;
    final Color seriesColor2 = appTheme.blueA400;
    final Color seriesColor3 = Colors.green;

    return <CartesianSeries<Circumference, DateTime>>[
      SplineAreaSeries<Circumference, DateTime>(
        markerSettings: MarkerSettings(
          isVisible: true,
          color: seriesColor1,
          height: 8,
          width: 8,
        ),
        dataLabelSettings: DataLabelSettings(
          labelAlignment: ChartDataLabelAlignment.top,
          isVisible: true,
        ),
        dataSource: widget.chartData,
        borderColor: seriesColor1,
        gradient: LinearGradient(
          colors: [
            seriesColor1.withOpacity(0.14),
            Colors.transparent,
          ],
          begin: Alignment.topCenter,
          end: Alignment(0, 0.6),
        ),
        name: 'Грудь',
        xValueMapper: (Circumference value, int index) => value.createdAt,
        yValueMapper: (Circumference value, int index) => value.chestCircumference,
      ),
      SplineAreaSeries<Circumference, DateTime>(
        markerSettings: MarkerSettings(
          isVisible: true,
          color: seriesColor2,
          height: 8,
          width: 8,
        ),
        dataLabelSettings: DataLabelSettings(
          labelAlignment: ChartDataLabelAlignment.top,
          isVisible: true,
        ),
        dataSource: widget.chartData,
        borderColor: seriesColor2,
        gradient: LinearGradient(
          colors: [
            seriesColor2.withOpacity(0.14),
            Colors.transparent,
          ],
          begin: Alignment.topCenter,
          end: Alignment(0, 0.6),
        ),
        name: 'Талия',
        xValueMapper: (Circumference value, int index) => value.createdAt,
        yValueMapper: (Circumference value, int index) => value.waistCircumference,
      ),
      SplineAreaSeries<Circumference, DateTime>(
        markerSettings: MarkerSettings(
          isVisible: true,
          color: seriesColor3,
          height: 8,
          width: 8,
        ),
        dataLabelSettings: DataLabelSettings(
          labelAlignment: ChartDataLabelAlignment.top,
          isVisible: true,
        ),
        dataSource: widget.chartData,
        borderColor: seriesColor3,
        gradient: LinearGradient(
          colors: [
            seriesColor3.withOpacity(0.14),
            Colors.transparent,
          ],
          begin: Alignment.topCenter,
          end: Alignment(0, 0.6),
        ),
        name: 'Бёдра',
        xValueMapper: (Circumference value, int index) => value.createdAt,
        yValueMapper: (Circumference value, int index) => value.hipCircumference,
      ),
    ];
  }
}