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';

import 'no_data_view.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.only(top: 12.h,bottom: 12.h,left: 32.w),
                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.w),
            ],
          ),
          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: (widget.stores == null || widget.stores.length == 0)
                ? Padding(
                    padding: EdgeInsets.symmetric(horizontal: 16.w),
                    child: Text(
                      "该优惠券未设置适用门店,适用情况请查看使用详情",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontWeight: MyFontWeight.regular,
                        fontSize: 14.sp,
                        color: Colors.black,
                      ),
                    ),
                  )
                : 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 == null || widget.stores.length == 0) {
                Navigator.of(context).pop();
              }
              // 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.h,
      margin: EdgeInsets.only(bottom: 12.h, left: 14.w, right: 14.w),
      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(),
          // ),
        ],
      ),
    );
  }
}