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

class CoversionRatePage extends GetWidget<CoversionRateController>{
  final controller = Get.put(CoversionRateController());

   CoversionRatePage({super.key});

  @override
  Widget build(BuildContext context) {
    return
      Center(
        child:
       Stack(
         children: [
            Image.asset('assets/images/bag_pit.jpg', width: Get.width-64.w, height: Get.height-32.h,fit: BoxFit.fill),
           Container(
             padding: EdgeInsets.symmetric(horizontal: 16.w),
             color: Colors.transparent,
             child: Column(
               children: [
                 SizedBox(height: 8.h,),
                 Text('CONVERSION RATE', style:  TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                 Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     Container(
                       width: (Get.width-100.w)*50/100,
                       height: 8.h,
                       color: Colors.black54,
                     ),
                     SizedBox(width: 4.w,),
                     Expanded(child: Container(
                       width: (Get.width-100.w)*50/100,
                       height: 8.h,
                       color: Colors.grey,
                     )),
                   ],
                 ),
                 SizedBox(height: 4.h,),
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
                     Text('84%', style:  TextStyle(color: Colors.black54, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                     Text('16%', style:  TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                   ],
                 ),
                 // Platform.isAndroid ?  SizedBox(height: 16.h): const SizedBox(),
                 Center(
                   child: GridView.builder(
                       padding: EdgeInsets.zero,
                       gridDelegate:
                        SliverGridDelegateWithFixedCrossAxisCount(
                         childAspectRatio: MediaQuery.of(context).orientation == Orientation.landscape? 2.h: 1.4.h,
                         crossAxisCount:  3,
                         crossAxisSpacing: 2.h, //khoảng cách theo chiều dọc
                         mainAxisSpacing: 2.w, //khoảng cách teho chiều ngang
                       ),
                       scrollDirection: Axis.vertical,
                       shrinkWrap: true, //chiều cuộn
                       physics: const ClampingScrollPhysics(),
                       itemCount: 6,
                       itemBuilder: (context, index) {
                         return
                         Column(
                           crossAxisAlignment: CrossAxisAlignment.center,
                           children: [
                             index <3 ? Text('CORNER', style:  TextStyle(color: Colors.grey, fontSize: 10.sp, fontWeight: FontWeight.w400),):Container(),
                             Row(
                               crossAxisAlignment: CrossAxisAlignment.end,
                               mainAxisAlignment: MainAxisAlignment.center,
                               children: [
                                 Column(
                                   children: [
                                     Text('2', style:  TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                                     Container(
                                       color: Colors.grey,
                                       width: 20.w,
                                       height: controller.getHeight(controller.num1.value, controller.num2.value),
                                     ),
                                   ],
                                 ),
                                 SizedBox(width: 2.w,),
                                 Column(
                                   mainAxisAlignment: MainAxisAlignment.end,
                                   children: [
                                     Text('1', style:  TextStyle(color: Colors.grey, fontSize: 12.sp, fontWeight: FontWeight.bold),),
                                     Container(
                                       color: Colors.grey,
                                       width: 20.w,
                                       height: controller.getHeight(controller.num2.value, controller.num1.value),
                                     ),
                                   ],
                                 ),

                               ],
                             ),
                             index >=3 ? Text('CORNER', style:  TextStyle(color: Colors.grey, fontSize: 10.sp, fontWeight: FontWeight.w400),):Container(),

                           ],
                         );
                       }),
                 ),

               ],
             ),
           )
         ],
       ),
      );
  }
}