import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/store.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:huixiang/store/scan.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/view_widget/border_text.dart';
import 'package:huixiang/view_widget/custom_image.dart';
import 'package:huixiang/view_widget/round_button.dart';

class SelectorStoreWidget extends StatefulWidget {
  final List<Store> stores;

  SelectorStoreWidget(this.stores);

  @override
  State<StatefulWidget> createState() {
    return _SelectorStoreWidget();
  }
}

class _SelectorStoreWidget extends State<SelectorStoreWidget> {
  int selectIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: ((widget.stores != null
                  ? (widget.stores.length > 4 ? 4 : widget.stores.length)
                  : 0.0) *
              52.0.h) +
          54.0.h +
          158.0.h,
      // padding: EdgeInsets.only(
      //   top: 16.h,
      //   bottom: 16.h,
      // ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                  child: Container(
                alignment: Alignment.center,
                margin: EdgeInsets.symmetric(vertical: 12),
                child: Text(
                  S.of(context).qingxuanzeshiyongmendian,
                  style: TextStyle(
                    fontWeight: MyFontWeight.bold,
                    fontSize: 15.sp,
                    color: Color(0xFF353535),
                  ),
                ),
              )),
              GestureDetector(
                onTap: () {
                  setState(() {
                    Navigator.of(context).pop();
                  });
                },
                child: Icon(
                  Icons.clear,
                  color: Colors.black,
                  size: 18,
                ),
              ),
              SizedBox(width: 14),
            ],
          ),
          Container(
            width: double.infinity,
            height: 1.h,
            color: Color(0xFFF2F2F2),
            margin: EdgeInsets.only(bottom: 11.h),
          ),
          Expanded(child:
          Container(
            height: (widget.stores != null
                ? (widget.stores.length > 4 ? 4 : widget.stores.length)
                : 0) *
                60.h,
            child: ListView.builder(
              physics: BouncingScrollPhysics(),
              itemBuilder: (context, position) {
                return GestureDetector(
                  onTap: (){
                    setState(() {
                      selectIndex = position;
                    });
                  },
                  child: storeItem(widget.stores[position], position),
                );
              },
              itemCount: widget.stores != null ? widget.stores.length : 0,
            ),
          )),
          GestureDetector(
            onTap: (){
              if (widget.stores[selectIndex].posType.code ==
                  "NORMALSTORE") {
                Scan.toScan(
                  context,
                  widget.stores[selectIndex].id,
                  widget.stores[selectIndex].tenantCode,
                  widget.stores[selectIndex].storeName,
                );
              } else {
                Navigator.of(context).pushReplacementNamed(
                  '/router/store_order',
                  arguments: {
                    "id": widget.stores[selectIndex].id,
                    "tenant": widget.stores[selectIndex].tenantCode,
                    "storeName": widget.stores[selectIndex].storeName
                  },
                );
              }
            },
            child: Container(
              width: double.infinity,
              height: 40.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                color:Color(0xFF32A060),
              ),
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 14.h,bottom: 30.h,left: 16.w,right: 16.w),
              child: Text(
                S.of(context).queding,
                style: TextStyle(
                  fontWeight: MyFontWeight.bold,
                  fontSize: 16.sp,
                  color: Color(0xFFFFFFFF),
                ),
              ),
            ),
          ),
          // Row(
          //   mainAxisAlignment: MainAxisAlignment.center,
          //   crossAxisAlignment: CrossAxisAlignment.center,
          //   children: [
          //     InkWell(
          //       onTap: () {
          //         Navigator.of(context).pop();
          //       },
          //       child: BorderText(
          //         text: S.of(context).quxiao,
          //         borderColor: Color(0xFF32A060),
          //         textColor: Color(0xFF32A060),
          //         radius: 4,
          //         fontSize: 16.sp,
          //         fontWeight: FontWeight.bold,
          //         borderWidth: 1.w,
          //         padding: EdgeInsets.symmetric(
          //           vertical: 12.h,
          //           horizontal: 42.w,
          //         ),
          //       ),
          //     ),
          //     SizedBox(
          //       width: 13.w,
          //     ),
          //     InkWell(
          //       onTap: () {
          //         if (widget.stores[selectIndex].posType.code ==
          //             "NORMALSTORE") {
          //           Scan.toScan(
          //             context,
          //             widget.stores[selectIndex].id,
          //             widget.stores[selectIndex].tenantCode,
          //             widget.stores[selectIndex].storeName,
          //           );
          //         } else {
          //           Navigator.of(context).pushNamed(
          //             '/router/store_order',
          //             arguments: {
          //               "id": widget.stores[selectIndex].id,
          //               "tenant": widget.stores[selectIndex].tenantCode,
          //               "storeName": widget.stores[selectIndex].storeName
          //             },
          //           );
          //         }
          //       },
          //       child: RoundButton(
          //         text: S.of(context).queding,
          //         textColor: Colors.white,
          //         backgroup: Color(0xFF32A060),
          //         radius: 4,
          //         fontSize: 16.sp,
          //         fontWeight: FontWeight.bold,
          //         padding: EdgeInsets.symmetric(
          //           vertical: 12.h,
          //           horizontal: 42.w,
          //         ),
          //       ),
          //     ),
          //   ],
          // ),
        ],
      ),
    );
  }

  Widget storeItem(Store store, position) {
    return  Container(
      height:52 ,
      margin: EdgeInsets.only(bottom: 12,left: 14,right: 14),
      child: Stack(
        alignment: Alignment.bottomRight,
        children: [
          Container(
            height: 52.h,
            width: double.infinity,
            decoration: BoxDecoration(
              borderRadius: new BorderRadius.circular(6),
              border: Border.all(
                color: position == selectIndex ? Color(0xFF32A060):Color(0xFFF7F7F7),
                width: position == selectIndex ? 1 :0,
              ),
              color: position == selectIndex ? Color(0xFFF0FAF4) :Color(0xFFF7F7F7),
            ),
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 12,),
            child: Text(
              store.storeName,
              style: TextStyle(
                fontWeight: MyFontWeight.bold,
                fontSize: 15.sp,
                color: position == selectIndex ?Color(0xFF32A060) : Color(0xFF0D0D0D),
              ),
            ),
          ),
          if (position == selectIndex)
          Image.asset(
            "assets/image/recharge.webp",
            width: 20,
            height: 20,
            fit: BoxFit.fill,
          ),
          // MImage(
          //   store.logo,
          //   width: 28.w,
          //   height: 28.h,
          //   fit: BoxFit.cover,
          //   radius: BorderRadius.circular(2),
          //   errorSrc: "assets/image/default_1.webp",
          //   fadeSrc: "assets/image/default_1.webp",
          // ),
          // SizedBox(
          //   width: 12.w,
          // ),
          // Expanded(
          //   flex: 1,
          //   child: Text(
          //     store.storeName,
          //     style: TextStyle(
          //       color: Color(0xFF353535),
          //       fontSize: 16.sp,
          //     ),
          //   ),
          // ),
          // Checkbox(
          //   value: position == selectIndex,
          //   onChanged: (value) {
          //     setState(() {
          //       selectIndex = position;
          //     });
          //   },
          //   checkColor: Color(0xFFFFFFFF),
          //   fillColor: MaterialStateProperty.all(Color(0xFF39B54A)),
          //   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          //   shape: CircleBorder(),
          // ),
        ],
      ),
    );
  }
}