import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/shatter/picker_container.dart';
import 'package:widgets/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

import '../../../router/page/rewards_page_router.dart';
import './rewards_code_vm.dart';

@RoutePage()
class RewardsCodePage extends HookConsumerWidget {
  final int? code;
  const RewardsCodePage({Key? key, @PathParam('code') required this.code}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context,
    int? code,
  }) {
    if (context != null) {
      context.router.push(RewardsCodePageRoute(code: code));
    } else {
      appRouter.push(RewardsCodePageRoute(code: code));
    }
  }

  Widget _buildItemLeftSection(BuildContext context, WidgetRef ref, item, _vm) {
    int? codes = code ?? 0;
    return Column(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Center(
              child: Text(
                'SHOW THE VERIFICATION CODE TO YOUR MERCHANT',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w500),
              ),
            ),
            Text(
              'VERIFICATION CODE',
              style: TextStyle(
                  fontSize: 18.0,
                  color: ColorUtils.string2Color('#54638C'),
                  fontWeight: FontWeight.w500),
            ).marginOnly(top: 35, bottom: 20),
            Text(
              '$codes',
              style: TextStyle(
                  fontSize: 36.0,
                  color: ColorUtils.string2Color('#4161D0'),
                  fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ],
    );
  }

  // listitem
  Widget _buildSaleItem(BuildContext context, WidgetRef ref, item, _vm) {
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [
              BoxShadow(
                  color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
            ],
          ),
          width: MediaQuery.of(context).size.width - 30,
          height: 250,
          // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [_buildItemLeftSection(context, ref, item, _vm)],
          ).paddingOnly(left: 26, right: 26, top: 40),
        ),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  // list
  Widget _buildSaleList(BuildContext context, WidgetRef ref, _vm) {
    List itemsList = _vm.state.list.toList();
    return _buildSaleItem(context, ref, itemsList[0], _vm);
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(rewardsCodeVmProvider.notifier);
    final state = ref.watch(rewardsCodeVmProvider);
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Verification Code",
        backgroundColor: context.appColors.whiteBG,
      ),
      body: Container(
        child: Column(
          children: [
            Expanded(
              child: 
              EasyRefresh(
                child: 
                Container(
                    color: ColorUtils.string2Color('#F2F3F6'),
                    padding: const EdgeInsets.only(top: 15),
                    child: _buildSaleList(context, ref, _vm)),
              ),
            )
          ],
        ),
      ),
    );
  }
}