import 'package:betting/view/mobile/find/detail_matches_in_regions/statistical_matches/performance_page/performance_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class PerformancePage extends StatelessWidget {
  PerformancePage({Key? key}) : super(key: key);
  final performanceController = Get.put(PerformanceController());

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: Get.width - 64.w,
        height: Get.height - 32.h,
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'PERFORMANCE',
                style: TextStyle(
                    color: Colors.grey,
                    fontSize: 13.sp,
                    fontWeight: FontWeight.bold),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    width: (Get.width - 64.w) * 0.3,
                    child: Column(
                      children: [
                        Text(
                          'UNDER',
                          style: TextStyle(
                              color: Colors.grey,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w500),
                        ),
                        Center(
                          child: Transform.scale(
                            scaleX: -1.0,
                            child: SizedBox(
                              height: 100.h,
                              width: 100.h,
                              child: SfCircularChart(
                                backgroundColor: Colors.transparent,
                                series: <CircularSeries>[
                                  // Renders radial bar chart
                                  RadialBarSeries<ChartData, String>(
                                      maximumValue: 100,
                                      trackColor: Colors.transparent,
                                      innerRadius: '50%',
                                      gap: '10%',
                                      dataSource: performanceController.chartData,
                                      xValueMapper: (ChartData data, _) => data.x,
                                      yValueMapper: (ChartData data, _) => data.y,
                                    pointColorMapper: (ChartData data, _) => data.color,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        Text(
                          'OVER',
                          style: TextStyle(
                              color: Colors.grey,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w500),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: (Get.width - 64.w) * 0.3,
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Container(
                              width: 10.w,
                              height: 2.h,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                            Text(
                              'OFFENSE',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w500),
                            ),
                            Container(
                              width: 10.w,
                              height: 2.h,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Container(
                              width: 10.w,
                              height: 2.h,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                            Text(
                              'DEFENSE',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w500),
                            ),
                            Container(
                              width: 10.w,
                              height: 2.h,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(20),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: (Get.width - 64.w) * 0.3,
                    child: Column(
                      children: [
                        Text(
                          'UNDER',
                          style: TextStyle(
                              color: Colors.grey,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w500),
                        ),
                        Center(
                          child: SizedBox(
                            height: 100.h,
                            width: 100.h,
                            child: SfCircularChart(
                              backgroundColor: Colors.transparent,
                              series: <CircularSeries>[
                                // Renders radial bar chart
                                RadialBarSeries<ChartData, String>(
                                  maximumValue: 100,
                                  trackColor: Colors.transparent,
                                  strokeWidth: 20,
                                  innerRadius: '50%',
                                  gap: '15%',
                                  dataSource: performanceController.chartData,
                                  xValueMapper: (ChartData data, _) => data.x,
                                  yValueMapper: (ChartData data, _) => data.y,
                                  pointColorMapper: (ChartData data, _) => data.color,
                                ),
                              ],
                            ),
                          ),
                        ),
                        Text(
                          'OVER',
                          style: TextStyle(
                              color: Colors.grey,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w500),
                        ),
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}
