import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'league_position_controller.dart';

class LeaguePositionPage extends GetWidget<LeaguePositionController>{
  final controller = Get.put(LeaguePositionController());

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        width: double.infinity,
        color: const Color.fromRGBO(254, 254, 254, 1),
        child: Column(
          children: [
            SizedBox(height: 8.h,),
            Text('LEAGUE POSSITON', style:  TextStyle(color: Colors.grey, fontSize: 14.sp, fontWeight: FontWeight.w400),),
            SizedBox(height: 8.h,),
            Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [

                Stack(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.circular(2.r)
                          ),
                          width: 12.w,
                          height: 100.h,
                        ),
                        Positioned(
                            bottom: 0,
                            child:
                            Container(
                              decoration: BoxDecoration(
                                  color: Colors.black54,
                                  borderRadius: BorderRadius.circular(2.r)
                              ),
                              width: 12.w,
                              height: 100*(controller.sum.value/15).h,
                            ))

                      ],
                    ),
                SizedBox(width: 6.w,),
                Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('${(100*controller.sum.value/15).ceil()}%', style:  TextStyle(color: Colors.black45, fontWeight: FontWeight.bold, fontSize: 30.sp),),
                    Text('FORM', style:  TextStyle(color: Colors.grey, fontWeight: FontWeight.w400, fontSize: 14.sp),),
                  ],
                ),
                Expanded(child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Stack(
                      children: [
                       Column(
                         children: [
                           Container(
                             color: Colors.grey,
                             height: 1.h,
                             width: 20.w,
                           ),
                           Container(
                             color: Colors.grey,
                             height: 100.h,
                             width: 1,
                           ),
                           Container(
                             color: Colors.grey,
                             height: 1.h,
                             width: 20.w,
                           ),
                         ],
                       ),
                        Positioned(
                          top: (80.h/20)*11,
                            child: Container(
                              height: 20.h,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(2),
                                  color: Colors.black54
                              ),
                              alignment: Alignment.center,
                              width: 20.w,
                              child: Text('9', style: TextStyle(color:Colors.white, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                            ))
                      ],
                    ),
                    SizedBox(width: 16.w,),
                    Stack(
                      children: [
                        Column(
                          children: [
                            Container(
                              color: Colors.grey,
                              height: 1.h,
                              width: 20.w,
                            ),
                            Container(
                              color: Colors.grey,
                              height: 100.h,
                              width: 1,
                            ),
                            Container(
                              color: Colors.grey,
                              height: 1.h,
                              width: 20.w,
                            ),
                          ],
                        ),
                        Positioned(
                            top: (80.h/20)*10,
                            child: Container(
                              height: 20.h,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(2),
                                  color: Colors.grey
                              ),
                              alignment: Alignment.center,
                              width: 20.w,
                              child: Text('9', style: TextStyle(color:Colors.white, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                            ))
                      ],
                    )
                  ],
                )),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('${(100*controller.sum2.value/15).ceil()}%', style:  TextStyle(color: Colors.black45, fontWeight: FontWeight.bold, fontSize: 30.sp),),
                    Text('FORM', style:  TextStyle(color: Colors.grey, fontWeight: FontWeight.w400, fontSize: 14.sp),),
                  ],
                ),
                SizedBox(width: 6.w,),
                Stack(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          color: Colors.grey,
                          borderRadius: BorderRadius.circular(2.r)
                      ),
                      width: 12.w,
                      height: 100.h,
                    ),
                    Positioned(
                        bottom: 0,
                        child:
                        Container(
                          decoration: BoxDecoration(
                              color: Colors.black54,
                              borderRadius: BorderRadius.circular(2.r)
                          ),
                          width: 12.w,
                          height: 100*(controller.sum2.value/15).h,
                        ))

                  ],
                ),

                  ],
                ),
          SizedBox(height: 8.h,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(
              height: 16.h,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemCount: controller.listH2hTeam1.length,
                itemBuilder: (context, index) {
                  return Row(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(2),
                            color: Colors.black26
                        ),
                        alignment: Alignment.center,
                        width: 16.w,
                        child: Text(controller.listH2hTeam1[index], style: TextStyle(color:Colors.white, fontSize: 10.sp, fontWeight: FontWeight.bold),),
                      ),
                      SizedBox(width: 1.w),

                     index <4 ?Container(
                        color: Colors.grey,
                        width: 4.w,
                        height: 2.h,
                      ): Container(),
                      SizedBox(width: 1.w),
                    ],
                  );
                },),
            ),
              SizedBox(
          height: 16.h,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemCount: controller.listH2hTeam2.length,
            itemBuilder: (context, index) {
              return Row(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(2),
                        color: Colors.black26
                    ),
                    alignment: Alignment.center,
                    width: 16.w,
                    child: Text(controller.listH2hTeam2[index], style: TextStyle(color:Colors.white, fontSize: 10.sp, fontWeight: FontWeight.bold),),
                  ),
                  SizedBox(width: 1.w),

                  index <4 ?Container(
                    color: Colors.grey,
                    width: 4.w,
                    height: 2.h,
                  ): Container(),
                  SizedBox(width: 1.w),
                ],
              );
            },),
        ),
            ],
          )


          ],
        ),
      ),
    );
  }
}